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

Question

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

jquerycsstabsresponsive-design

5

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

例如：Google Chrome、Firefox、Sublime Text等。

- Sahat Yalkabov

4

搜索“响应式设计”以获取更多信息。 - Christophe

你应该使用“CSS”标签，而不是“javascript”和“jquery”。 - Quasipickle

3个回答

6

你可以只使用CSS来实现此功能：

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

li {
    display: table-cell;
}

table-layout: fixed是最有价值的属性。通常情况下，该属性的属性值为auto，当应用于表格时，它将根据单元格内容调整单元格大小。Fixed将调整单元格大小，并使它们的宽度相等，总宽度为容器的宽度除以单元格数。额外的好处：计算速度更快。

jsFiddle

- kpeatt

在Jsfiddle中运行正常，但在空白HTML页面和<head>中定义的内联CSS中却无法运行。已在最新版chrome和firefox浏览器中尝试过。 - Sahat Yalkabov

你可能把某些东西搞砸了。这是一个干净的 HTML 页面，它可以正常工作：https://dl.dropbox.com/u/70828364/stackoverflow/15394441/index.htm - kpeatt

算了，我不小心打成了.ul而不是ul。:p。在公交车上编程很容易出错。 - Sahat Yalkabov

我的答案有什么问题吗？比使用JS更加简洁/快速。 - kpeatt

0

给列表设置"display: table-row"，并将列表项设置为"display: table-cell"，宽度为1%。

- Quasipickle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- superUntitled · Accepted Answer

如果你知道你将有多少个“选项卡”，那么你可以将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; }