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

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/7/29 /）：使用表格单元是实现此布局的最佳现代方法。请参阅下面的felix答案。该table cell属性当前可用于94％的浏览器。您必须对IE7及以下版本进行某些处理，否则应该没问题。

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

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

Answer 1

text-align:justify在容器上使用，这样无论您列表中有多少个元素，它都将起作用（您不必为每个列表项计算％宽度）

    #nav {

        text-align: justify;

        min-width: 500px;

    }

    #nav:after {

        content: '';

        display: inline-block;

        width: 100%;

    }

    #nav li {

        display: inline-block;

    }


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