css - 列表's 分成两列并且具有自动/等宽

Question

如果我有一个生成<li>的 s 列表，我将它们分成这样的列，那么有可能以某种方式让列的宽度与最宽的 s 一样宽<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');

Answer 2

使用 CSS，使UL宽度是 的两倍，LI并float:left;在LI.