css - 的列表分成两列并具有自动/等宽

Question

如果我有生成的列表 <li>我要分成几列 like this是否有可能以某种方式让列与最宽的列一样宽 <li> .

我有一个下拉导航，目前我在 <li> 上只有一个固定宽度s 但对于较小的导航元素，如“常见问题解答”，有很多“空白空间”，客户要求我删除。

问题是代码是为我生成的，所以我不能添加任何额外的标记。我的经验告诉我这是不可能的，但我希望有人能证明我是错的。

Answer 1

这是一个使用 jQuery 的解决方案:http://jsfiddle.net/kr9PE/2/ .

它循环遍历所有 <li>元素，保存最宽的一个的宽度。然后它将该宽度(加上两边的填充)应用于所有 <li>元素。

var items = $('#attempt ul').children();
var widestItemWidth = 0;
var padding = 10;

items.each(function() {
    var thisItemWidth = $(this).width();

    console.log($(this));

    if (thisItemWidth > widestItemWidth) {
        widestItemWidth = thisItemWidth;
    }
});

items.css('width', widestItemWidth + padding + 'px');