如果这个问题以前已经被问过,我很抱歉,但我该如何使用CSS和JavaScript实现标签(常规HTML无序列表元素),使它们自动调整大小以适应固定宽度的容器?
例如:Google Chrome、Firefox、Sublime Text等。
如果这个问题以前已经被问过,我很抱歉,但我该如何使用CSS和JavaScript实现标签(常规HTML无序列表元素),使它们自动调整大小以适应固定宽度的容器?
例如:Google Chrome、Firefox、Sublime Text等。
如果你知道你将有多少个“选项卡”,那么你可以将100除以该数字,然后将宽度设置为该百分比。例如:对于5个元素,width:20%
。
然而...
如果你决定使用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; }
<li>
改为19%而不是20%,它就可以放在同一行上了。我还在<li>
左右两侧添加了填充,这可能是原因吗? - Sahat Yalkabovul {
display: table;
table-layout: fixed;
width: 100%;
}
li {
display: table-cell;
}
table-layout: fixed
是最有价值的属性。通常情况下,该属性的属性值为auto
,当应用于表格时,它将根据单元格内容调整单元格大小。Fixed将调整单元格大小,并使它们的宽度相等,总宽度为容器的宽度除以单元格数。额外的好处:计算速度更快。