HTML & CSS : How to create four equal size tabs that fill 100% width?

Question

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

• 四个大小相等的选项卡，每个选项卡中的文本居中。
• 它们应该填满整个页面宽度。

我非常希望设计灵活且浏览器友好。我尝试了各种 float 技术，但我无法让它发挥作用。我希望你能帮助我!

谢谢。

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很有用但有一个缺点:必须仔细管理两个元素之间的空白。是否删除</li>在 HTML5 或 </li>在以下行的开头卡住了 </li><li>next item或其他技巧，您仍然需要做一些事情，否则它会在 2 个元素之间产生 ~4px 的间隙。

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

如果你希望元素总宽度为 100% 且宽度相等，另一种方法是使用 display: table (和 table-cell )与 table-layout: fixed 强制浏览器使用其他表格算法，该算法不会尝试使单元格宽度适应内容，而是尽可能尊重设计人员/开发人员所需的宽度。

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

fiddle

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