jquery - li 菜单选项卡填充页面宽度（相等）

Question

我试图让一个水平菜单填充页面的宽度或包含 div。但我希望li元素都具有相同的宽度，现在这些是动态的，因此li元素的数量可以逐页更改，因此我不能简单地设置宽度或拆分百分比。我不确定我是否有正确的方法table-cell？

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

有没有办法做到这一点？

http://jsfiddle.net/juGJ4/

Answer 1

table-layout:fixed 应该完全符合您的要求 - 如果您可以使用表格，则制作等宽的列。

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

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

Answer 2

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

（顺便说一句，您需要在您的和元素table-row之间添加一个元素。）tabletable-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;
}

但是，在某些情况下，这仍然不起作用，因为您的表格单元格包含不会换行的长字符串，因此会强制它们各自的表格单元格为某个最小宽度。这里最好的解决方案是简单地分解那些长字符串。