portfolio区的导航边框问题

<section class="portfolio">

<h2>Portfolio</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing edlit, sed do eiusmodtempor incididunt ut labore et<br>dolore magna aliqua. Ut enim ad minim veniam</p>

<nav>

<a href="#">ALL</a>

<a href="#">WEB</a>

<a href="#">SOFTWORE</a>

<a href="#">&nbsp&nbsp&nbsp&nbsp&nbspWORKS</a>

<a href="#">BRANDS</a>

</nav>

.portfolio > nav > a { position: absolute; font-size: 22px; top: 980px; color: #f46208; text-align: center;}

.portfolio > nav > a:nth-child(1) { left: 698px; border: 1px solid #f46208; }

.portfolio > nav > a:nth-child(2) { left: 776px; border: 1px solid #f46208; }

.portfolio > nav > a:nth-child(3) { left: 970px; border: 1px solid #f46208; }

.portfolio > nav > a:nth-child(4) { left: 1007px; border: 1px solid #f46208; }

.portfolio > nav > a:nth-child(5) { left: 1120px; border: 1px solid #f46208; }

1.首先是边框长度都是一样的大小，导致字母多的单词的边框还是那么大。

2.其次边框宽度偏大，想弄小一点，应该怎么弄？

3.边框之间的间距怎么调整

4.边框居中问题

慕姐7564978 2017-02-08

源自：HTML5展望 3-2 作业题

收起

1回答

小于飞飞回答被采纳获得+3积分 2017-02-08 18:43:14

每个导航的位置不用top，left 定位，因为a是行内元素，会在一行显示。
之间距离使用margin来设置。
文字和边框的距离使用padding来设置。

思路见下面代码（后期需要根据需求不断完善）：

css样式：

.portfolio>nav{width:800px; margin:0 auto; }
.portfolio > nav > a {font-size: 22px;  color: #f46208; text-align: center; text-decoration: none;padding:5px 10px; margin-right: 15px;}
.portfolio > nav > a:hover{background-color: #f46208;color:#fff;} 
.portfolio > nav > a:nth-child(1) { border: 1px solid #f46208; }
.portfolio > nav > a:nth-child(2) { border: 1px solid #f46208; }
.portfolio > nav > a:nth-child(3) {  border: 1px solid #f46208; }
.portfolio > nav > a:nth-child(4) {border: 1px solid #f46208; }
.portfolio > nav > a:nth-child(5) {  border: 1px solid #f46208; }

HTML样式：

<section class="portfolio">
    <h2>Portfolio</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing edlit, sed do eiusmodtempor incididunt ut labore et<br>dolore magna aliqua. Ut enim ad minim veniam</p>
    <nav>
      <a href="#">ALL</a>
      <a href="#">WEB</a>
      <a href="#">SOFTWORE</a>
      <a href="#">WORKS</a>
      <a href="#">BRANDS</a>
    </nav>
</section>

效果：

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

慕姐7564978 提问者 #1

1.是不用top定位还是不能用top定位 2.然而这个代码我copy的效果是导航框在header下面无缝衔接 3.而如果用position定位的话，relative是在右面分散分布，根本没法调整居中，absolute是在中间五个导航框有的和在一起，没有办法分开

2017-02-08 21:57:36
慕姐7564978 提问者 #2

我解决了鼠标移动背景颜色的问题和padding的问题，非常感谢

2017-02-08 21:59:08
慕姐7564978 提问者 #3

非常感谢！

2017-02-09 09:17:31