我需要创建一个具有不断变化的项目数量的水平导航菜单(这很重要 – 我不能将宽度粗加到CSS中,我不想用JS计算它们),填充到一定宽度,让我们说800px.
与表,
<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>
请注意,较长的项目占用更多的空间,我可以在HTML中添加项目,而无需更改CSS中的任何内容,并且菜单项缩小以适应其他项目 – 整个菜单永远不会缩短或超过800像素.
由于菜单不是语义上正确的使用表,可以用列表和纯CSS来完成吗？
解决方法
在
browsers that support the table display CSS规则中,是的：
<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>
基本上,你必须建立一个令牌表.行动：http://jsbin.com/urisa4
否则：不,如果你不能妥协你的要求.
