如何在指定容器上均匀且完全拉伸固定数量的水平导航项

Question

我想在900像素的容器中均匀地拉伸6个导航项目，并且在两者之间留有均匀的空白。例如...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

目前，我能找到的最佳方法如下：

nav ul {

  width: 900px; 

  margin: 0 auto;

}

nav li {

  line-height: 87px;

  float: left;

  text-align: center;

  width: 150px;

}

与此相关的问题有两个。首先，它并不能真正证明其合理性，而是将li标签均匀地分布在整个ul标签中。在“ HOME”或“ ABOUT”等较小菜单项与“ BASIC SERVICES”等较大菜单项之间创建不均匀的空格。

第二个问题是，如果导航项大于150px（特殊服务就是该布局），则布局会中断，即使整个导航有足够的空间也是如此。

谁能为我解决这个问题？我一直在网上寻找解决方案，但它们似乎都不够用。CSS / HTML仅在可能的情况下...

谢谢！

更新（13/29/29）：使用表格单元是实现此布局的最佳现代方法。请参阅下面的felix答案。该table cell属性当前可用于94％的浏览器。您必须对IE7及以下版本进行处理，否则应该可以。

更新（13/30/13）：不幸的是，如果您将此布局与Media Queries结合使用，则会有一个Webkit错误会对此产生影响。现在，您必须避免更改'display'属性。 请参阅Webkit错误。

更新（7/25/14）：现在有一个更好的解决方案，涉及text-align：justify。使用它比较简单，并且可以避免Webkit错误。

Answer 1

text-align:justify在容器上使用，这样无论您列表中有多少个元素，它都将起作用（您不必为每个列表项计算％宽度）&nbsp; &nbsp; #nav {&nbsp; &nbsp; &nbsp; &nbsp; text-align: justify;&nbsp; &nbsp; &nbsp; &nbsp; min-width: 500px;&nbsp; &nbsp; }&nbsp; &nbsp; #nav:after {&nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; #nav li {&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; }<ul id="nav">&nbsp; &nbsp; <li><a href="#">HOME</a></li>&nbsp; &nbsp; <li><a href="#">ABOUT</a></li>&nbsp; &nbsp; <li><a href="#">BASIC SERVICES</a></li>&nbsp; &nbsp; <li><a href="#">OUR STAFF</a></li>&nbsp; &nbsp; <li><a href="#">CONTACT US</a></li></ul>