HTML & CSS：如何创建四个相同大小的标签，填充 100% 宽度？

Question

我正在尝试为我的网站创建一个导航面板。我希望它包括：

• 四个相同大小的选项卡，每个选项卡都以文本为中心。
• 它们应该填满整个页面宽度。

我真的希望设计灵活且对浏览器友好。我尝试了各种浮动技术，但我无法让它发挥作用。我希望你能帮助我！

谢谢。

Answer 1

HTML

编辑：现在是 2015 年，HTML5 已经存在了一段时间；以下代码应位于 nav 元素 (html5doctor) 中，并在其上带有地标 ARIA 属性 role="navigation"（并且 99.9% 的时间在任何给定页面中都是唯一的）。

导航面板应使用无序列表的链接：

<ul id="nav">
  <li><a href="#">One</a></li>
  <li><a href="#"> Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth and last, so large that... worst case</a></li>
</ul>

CSS

EDIT2：现在是 2017 年，只需使用 Flexbox ?（带或不带 flex-wrap: wrap）

inline-block 很有用，但有一个缺点：必须仔细管理两个元素之间的空白。无论是在 HTML5 中删除或不删除 </li> 还是在下一行开头的 </li> 像 </li><li>next item 或其他技巧一样卡住，你仍然需要做一些事情，否则它会在 2 个元素之间创建一个 ~4px 的间隙。

如果总数不是 4 的倍数，25% + 25% + 25% + 25% 并不等于所有浏览器的 100%。每个浏览器都有自己的舍入方法。

如果您希望元素的总宽度为 100% 且宽度相等，另一种方法是使用 display: table（和 table-cell）和 @987654335 @ 强制浏览器使用 other 表格算法，该算法不会尝试使单元格宽度适应内容，而是尽可能尊重设计者/开发人员想要的宽度。

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
#nav {
  display: table;
  table-layout: fixed;
  text-align: center;
}
#nav li {
  display: table-cell;
  width: 25%;
  padding-right: 1px;
  height: auto;
  vertical-align: bottom;
}
#nav a {
  display: block;
  min-height: 100%;
  padding: 4px 10px;
  background-color: #222;
  color: white;
  border-radius: 6px 6px 0 0;
}

小提琴

http://jsfiddle.net/PhilippeVay/aHCy3/1/
编辑：http://jsfiddle.net/PhilippeVay/aHCy3/2/ 使用另一种方法在每个选项卡之间留出空间，由我的同事提供。