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

第二版：2017年，只需使用Flexbox😲（带或不带flex-wrap: wrap）

inline-block很有用，但有一个缺点：必须小心管理两个元素之间的空白。无论是否在HTML5中删除</li>，或者在下一行开始时像</li><li>next item或其他技巧一样卡住</li>，你仍然需要做一些事情，否则它会在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/我的同事提供了另一种在每个标签之间留出空间的方法。

Answer 2

您不需要浮点运算。只需将宽度设置为25%，或者稍微小于25%。如果在块级元素上使用此选项，请设置display: inline-block。这将适用于所有浏览器大小，以及响应窗口大小调整。

HTML

<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>​

CSS

body, html {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav {
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}​​

实时演示

Answer 3

css：

.tab {
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
}​

html:

<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>​

jsfiddle：http://jsfiddle.net/zP7Xh/6/