如何自动调整选项卡大小以适应固定宽度的容器？

Question

我很抱歉,如果之前已经问过这个问题但是我如何实现标签(常规的HTML无序列表元素),这些标签会同等地调整大小以适应使用CSS和JavaScript的固定宽度容器？

示例:*Google Chrome,Firefox,Sublime Text等*

Answer 1

如果您知道有多少"标签",那么您可以将该数字除以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; }

Answer 2

你可以用CSS做到这一点:

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
}

table-layout: fixed是这里最有价值的财产.通常,此属性具有以下属性:auto当应用于表时,将根据其内容调整单元格的大小.固定将调整单元格的大小,并为它们提供相等的宽度,总宽度为容器的宽度除以单元格数.额外奖励:计算速度更快.

的jsfiddle