html - 如何跨指定容器均匀、充分地拉伸(stretch)固定数量的水平导航项

Question

我想在一个 900 像素的容器中均匀地拉伸(stretch) 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 标签中。 .

第二个问题是，如果导航元素大于 150 像素，布局就会中断，这是特殊服务 - 即使整个导航有足够的空间。

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

谢谢!

更新(2013 年 7 月 29 日):使用 table-cell 是实现此布局的最佳现代方式。请参阅下面的 felix 的回答。 表格单元格 属性 works on 94% of browsers目前。您必须对 IE7 及更低版本进行一些处理，但其他方面应该没问题。

更新(2013 年 7 月 30 日):不幸的是，如果您将此布局与媒体查询结合使用，则有一个 webkit 错误会影响此设置。现在您必须避免更改“显示”属性。 See Webkit Bug.

更新(2014 年 7 月 25 日):下面有一个更好的解决方案，涉及文本对齐:对齐。使用它更简单，您将避免 Webkit 错误。

Answer 1

现代的均匀分布元素的方法是在容器元素上设置以下两个声明:

.container {
  display: flex; /* (1) */
  justify-content: space-between; /* (2) or space-around or space-evenly */ 
} 

用于 justify-content 的值取决于需要哪种均匀分布。

参见 MDN

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  border: 3px solid gold;
  display: flex;
}
a {
  background: gold;
}
ul {
  justify-content: space-between;
}
ul ~ ul {
  justify-content: space-around;
}
ul ~ ul ~ ul {
  justify-content: space-evenly;
}

<h3>justify-content: space-between; </h3>

<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>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<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>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<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>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>

---

这是我的原始答案——如果出于某种原因使用 flex 容器不可行

在容器上使用 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>

FIDDLE