4

如果之前有人问过这个问题，我很抱歉，但是我将如何实现标签（常规的 HTML 无序列表元素），它们使用 CSS 和 JavaScript 调整自身大小以适应固定宽度的容器？

示例： *Google Chrome、Firefox、Sublime Text 等 *

4

3 回答 3

9

如果您知道您将拥有多少个“标签”，那么您只需将 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; }
于 2013-03-13T19:47:04.673 回答
6

你可以只用 CSS 做到这一点：

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

li {
    display: table-cell;
}

table-layout: fixed是这里最有价值的财产。通常，此属性具有属性auto，当应用于表格时，将根据单元格的内容调整单元格的大小。Fixed 将调整单元格的大小，并为每个单元格赋予相等的宽度，总计容器的宽度除以单元格的数量。额外的好处：计算速度更快。

jsFiddle

于 2013-03-13T19:59:33.760 回答
-1

给列表显示“table-row”，列表项显示“table-cell”，宽度为 1%。

于 2013-03-13T19:30:48.143 回答