HTML 和 CSS：如何创建四个填充 100% 宽度的大小相等的选项卡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12019386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML & CSS: How to create four equal size tabs that fill 100% width?
提问by nodesto
I am trying to create a navigation panel for my website. I would like it to consist of:
我正在尝试为我的网站创建一个导航面板。我希望它包括：
- Four tabs in equal size with text-centered in each tab.
- They should fill the whole page width.
- 四个大小相同的选项卡，每个选项卡都以文本为中心。
- 它们应该填满整个页面宽度。
I would really like the design to be flexible and browser friendly. I have tried various float techniques, but I can't get it to work. I hope that you can help me out!
我真的希望设计灵活且浏览器友好。我尝试了各种浮动技术，但我无法让它发挥作用。我希望你能帮助我！
Thank you.
谢谢你。
回答by FelipeAls
HTML
HTML
EDIT: it's 2015 and HTML5 has been there for a while; following code should be inside a navelement (html5doctor) with landmark ARIA attribute role="navigation"on it (and 99.9% of the time be unique in any given page).
编辑：现在是 2015 年，HTML5 已经存在一段时间了；以下代码应位于具有里程碑 ARIA 属性的nav元素 ( html5doctor)内role="navigation"（并且 99.9% 的时间在任何给定页面中都是唯一的）。
A navigation panel should use an unordered list of links:
导航面板应使用无序列表的链接：
<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
CSS
EDIT2: It's 2017, just use Flexbox(with or without flex-wrap: wrap)
EDIT2：现在是 2017 年，只需使用Flexbox（有或没有flex-wrap: wrap）
inline-blockis useful but has one drawback: whitespace between two elements must be carefully managed. Whether removed or no </li>in HTML5 or </li>at the beginning of the following line stuck like </li><li>next itemor other tricks, you still have to do something or it'll create a ~4px gap between 2 elements.
inline-block很有用，但有一个缺点：必须小心管理两个元素之间的空白。无论是</li>在 HTML5 中删除或不删除，还是</li>在下一行的开头卡住</li><li>next item或其他技巧，您仍然必须做一些事情，否则它会在 2 个元素之间创建 ~4px 的间隙。
25% + 25% + 25% + 25% doesn't equal 100% on all browsers if the total isn't a multiple of 4. Each browser has its own rounding method.
如果总数不是 4 的倍数，则 25% + 25% + 25% + 25% 并不等于所有浏览器的 100%。每个浏览器都有自己的舍入方法。
If you want elements to total 100% width and equal width, another method is to use display: table(and table-cell) with table-layout: fixedto force browsers to use the othertable algorithm, the one that doesn't try to adapt cells width to content but respect the widths wanted by the designer/developer as far as possible.
如果您希望元素总宽度为 100% 且宽度相等，另一种方法是使用display: table(and table-cell) withtable-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/
edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/with another method for space between each tab, courtesy of my colleague.
http://jsfiddle.net/PhilippeVay/aHCy3/1/
编辑：http: //jsfiddle.net/PhilippeVay/aHCy3/2/使用另一种方法在每个选项卡之间设置空格，由我的同事提供。
回答by xbonez
You don't need floats for this. Just set the width to 25%, or a tiny bit less than 25%. If you're using this on a block level element, set display: inline-block. This will work for all browser sizes, as well as respond to window resize.
为此，您不需要花车。只需将宽度设置为 25%，或者略小于 25%。如果您在块级元素上使用它，请设置display: inline-block. 这将适用于所有浏览器大小，以及响应窗口大小调整。
HTML
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
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;
}??
回答by mash
css:
css：
.tab {
float: left;
width:25%;
height:25px;
background:black;
border:1px solid #fff;
box-sizing: border-box;
}?
html:
html：
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>?
jsfiddle: http://jsfiddle.net/zP7Xh/6/
jsfiddle：http: //jsfiddle.net/zP7Xh/6/
