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

Question

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

http://jsfiddle.net/td5rt3or/1/

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;
}

你现在的边距实际上是填充。将 padding: 0 添加到 ul 以将其删除:

#nav {
  padding: 0;
}

fiddle - http://jsfiddle.net/zko26qxu/