Question

我目前有一个可调整大小的导航栏，可以在页面宽度上均匀分布元素。导航中的右侧元素非常靠近页面的末尾，而最左侧的元素具有良好的边距。如何使最右边的元素从右边有一个边距，就像最左边的元素从左边有一个边距一样？

HTML

<ul id="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BASIC SERVICES</a></li>
        <li><a href="#">OUR STAFF</a></li>
        <li><a href="#">CONTACT US</a></li>
</ul>

CSS

#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}

#nav li {
margin-top: 2%;
display: inline-block;
}

Answer 1

你可以给ul最大宽度95％，然后使用margin：0 auto来居中：

#nav {
  max-width:95%;
  margin: 0 auto;
}

您目前的保证金实际上是填充。添加填充：0到ul删除它：

#nav {
  padding: 0;
}

小提琴 - http://jsfiddle.net/zko26qxu/

如何使导航栏中均匀分布的元素不触及页面边缘？

1 个答案: