Question

我正在尝试使用水平菜单填充页面宽度或包含div。但我希望li个元素都是相同的宽度，现在这些是动态的，因此li元素的数量可以在页面之间改变，所以我不能简单地设置宽度或拆分百分比。我不确定我是否使用table-cell得到了正确的方法？

li元素垂直拉伸不是问题，但它们必须全部伸展到相同的数量。

有没有办法做到这一点？

http://jsfiddle.net/juGJ4/

Answer 1

您可以这样做，但不能使用纯CSS。

（顺便说一句，您需要table-row和table元素之间的table-cell元素。）

这是一个使用单行jQuery指定加载后的单元格宽度的解决方案：http://jsfiddle.net/mblase75/juGJ4/1/

jQuery的：

$('.menu li').width((100/$('.menu li').length)+'%');

CSS：

div.width {
    display: table;
}
ul.menu, div.menu ul {
    display:table-row;
    width:100%;
    margin: 0;
    padding: 0;
}
.menu li, div.menu li {
    display:table-cell;
    text-align: center;
}

在某些情况下，这仍然无效，因为您的表格单元格包含不会换行的长字符串，因此强制它们各自的表格单元格达到某个最小宽度。这里最好的解决方案就是打破这些长串。

Answer 2

table-layout：fixed应该完全符合你的要求 - 如果你使用表格就可以制作宽度相等的列。

对于内联元素，我发现了一个巧妙的技巧：text-align：justify和额外的空内容：

    .fulljustify {
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

li菜单选项卡填充页面宽度（同样）

2 个答案: