如果以前曾经问过我,我会道歉但是如何实现使用CSS和JavaScript调整固定宽度容器的标签(常规HTML无序列表元素),这些标签会自行调整大小以适应固定宽度的容器?
示例: * Google Chrome,Firefox,Sublime Text等*
答案 0 :(得分:7)
如果您知道有多少'标签',那么您可以将该数字除以100,并将宽度设置为该百分比。即:width:20%
代表5个元素。
...然而
如果您设置使用jquery动态设置元素的宽度,请参阅此处的示例: http://jsfiddle.net/eMLTB/3/
<div id="wrapper" class="clearfix">
<ul id="nav">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>
</div>
jquery的
var n = $("#nav li").length;
var w = (100/n);
$("#nav li").width(w+'%');
CSS
#wrapper { width: 90%; background:#aaa; }
#nav { margin:0; padding:0;}
#nav li { float: left; list-style:none; margin:0;}
#nav li a { display: block; padding:5px; background: #ddd; margin-right:1px; }
答案 1 :(得分:6)
你可以用CSS做到这一点:
ul {
display: table;
table-layout: fixed;
width: 100%;
}
li {
display: table-cell;
}
table-layout: fixed
是这里最有价值的财产。通常,此属性具有auto
属性,当应用于表时,将根据其内容调整单元格的大小。固定将调整单元格的大小,并为它们提供相等的宽度,总宽度为容器的宽度除以单元格数。额外奖励:计算速度更快。
答案 2 :(得分:-1)
为列表显示&#34; table-row&#34;,列表项显示&#34; table-cell&#34;宽度为1%。