CSS动态水平导航菜单填充特定宽度(表格行为)
Posted
技术标签:
【中文标题】CSS动态水平导航菜单填充特定宽度(表格行为)【英文标题】:CSS dynamic horizontal navigation menu to fill up specific width (table behavior) 【发布时间】:2011-07-02 05:02:30 【问题描述】:我需要创建一个水平导航菜单,其中包含不断变化的项目数量(这很重要 - 我不能将宽度硬编码到 CSS 中,我不想用 JS 计算它们)填充到一定的宽度,比如 800px。
有桌子,
<table 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>
请注意,较长的项目占用更多空间,我可以在不更改 CSS 中的任何内容的情况下将项目添加到 html 中,并且菜单项会缩小以容纳其他项目 - 整个菜单永远不会短于或长于 800 像素。
由于菜单在语义上不是对表格的正确使用,因此可以通过列表和纯 CSS 来实现吗?
【问题讨论】:
我能想到一些“几乎”但不是 100% 的解决方案。也许有display:table-cell
【参考方案1】:
在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
否则:不,如果你不能妥协你的要求。
【讨论】:
谢谢。和你前人一样的解决方案,但是在IE7下不行,所以我用不了。【参考方案2】:你可以这样做:
<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>
这样它会填满你想要的东西,但可以增长到很多项目。
希望这会有所帮助。
【讨论】:
与您之前的解决方案类似。两个问题:1.(次要)所有项的宽度相等,2.(主要)IE7不支持display:table-cell,所以不起作用 非常接近,是的,但是内部 div 可以使用 white-space:nowrap 或者如果它变宽,则换行。【参考方案3】:使用 CSS 执行此操作的唯一方法是对 li
元素的 width
进行硬编码(假设您将使用以下结构):
<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%;
JS Fiddle demo.
这可能会留下“未使用”的 10%(用于margin
或额外的padding
)。
在未来的某个时候css calculations 可能能够更流畅地执行此操作。
【讨论】:
谢谢,但这不是我要找的。我不知道菜单项的数量(例如,网站每个部分的项目数量不同)并且每个项目的宽度根据文本长度而不同。【参考方案4】:这行得通,但我不认为你想要这样的想法:)
<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;
http://jsfiddle.net/UnNyS/
【讨论】:
这在 Chrome 和 Firefox 中效果很好,但在 IE 中失效:( 您可以查看 ie 规范它们适用于元素的类。这里我只是复制表格类... IE7 根本不支持 display: table,正如你指出的那样。以上是关于CSS动态水平导航菜单填充特定宽度(表格行为)的主要内容,如果未能解决你的问题,请参考以下文章