Html CSS 动态水平导航菜单填充特定宽度（表格行为）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5082067/
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
CSS dynamic horizontal navigation menu to fill up specific width (table behavior)
提问by Zdeněk Gromnica
I need to create a horizontal navigation menu with a changing number of items (this is important - I can't hard-code widths into the CSS and I don't want to calculate them with JS) that fill up to a certain width, let's say 800px.
我需要创建一个水平导航菜单，其中的项目数量不断变化（这很重要 - 我不能将宽度硬编码到 CSS 中，我不想用 JS 计算它们），填充到一定的宽度，比方说 800px。
With tables, 
有桌子，
<table width="800" cellspacing="0" cellpadding="0">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five Seven</td>
</tr>
</table>
<style>
table td {
padding: 5px 0;
margin: 0;
background: #fdd;
border: 1px solid #f00;
text-align: center;
}
</style>
Note that longer items take up more space and I can add items into the HTML without changing anything in CSS and the menu items shrink to accommodate additional items - the whole menu never being shorter or longer than 800px.
请注意，较长的项目占用更多空间，我可以在不更改 CSS 中的任何内容的情况下将项目添加到 HTML 中，并且菜单项会缩小以容纳其他项目——整个菜单永远不会短于或长于 800 像素。
As a menu isn't a semantically correct use of a table, can this be done with say a list and pure CSS?
由于菜单在语义上不是表格的正确使用，所以可以说列表和纯 CSS 来完成吗？
回答by DanMan
In browsers that support the table displayCSS rules, yes:
<style>
nav {display:table; width:800px; background:yellow}
ul {display:table-row; }
li {display:table-cell; border:1px solid red}
</style>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five Seven</li>
</ul>
</nav>
Basically, you'd have to build a token table. In action: http://jsbin.com/urisa4
基本上，您必须构建一个令牌表。在行动：http: //jsbin.com/urisa4
Otherwise: no, not if you can't compromise your requirements.
否则：不，如果您不能妥协您的要求，则不会。
回答by TNC
You could do something like this:
你可以这样做：
<style type="text/css">
#container { width: 800px ; border: 1px dashed #333; }
#container div { width: inherit; display: table-cell; background: #ccc}
</style>
<div id="container">
<div>Something</div>
<div>Something</div>
<div>Something</div>
</div>
That way it fills up what you want, but can grow to a lot of items.
这样它会填满你想要的东西，但可以增长到很多项目。
Hope this helps.
希望这可以帮助。
回答by David says reinstate Monica
The only way to do this with CSS is to hard-code the widthof the lielements (assuming you'd be using the following structure):
用CSS来做到这一点的唯一方法是硬编码width的的li元素（假设你会使用下面的结构）：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five Seven</li>
</ul>
ul {
width: 80%; /* or whatever */
}
ul li {
width: 16%;
padding: 1%;
}
This leaves, potentially, an 'unused' 10% (to be used for marginor additional padding).
这可能会留下 10% 的“未使用”（用于margin或附加padding）。
At some point in the future css calculationsmight be able to perform this more fluidly.
在未来的某个时候，css 计算可能能够更流畅地执行此操作。
回答by Luke
This works, but i don′t think you want some think like this :)
这有效，但我不认为你想要一些这样的想法:)
<div class="master">
<ul>
<li>test1</li>
<li>test2</li>
<li>a?lsdkfa?sdlfk</li>
<li>yeah baby</li>
<li>hi</li>
</ul>
</div>
.master {
width:800px;
background-color:black;
height:100px;
color:white;
display:table;
}
table {
width:100%;
}
ul {
display:table-row;
width:100%;
}
li {
display:table-cell;
width:auto;
margin:1px;
border:1px solid white;
background-color:red;
text-align:center;
vertical-align:middle;
}
