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

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在容器上使用，这样无论您列表中有多少个元素，它都将起作用（您不必为每个列表项计算％宽度）

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