Question

如果我有一个生成的<li>列表，我将其拆分为like this列，则可能以某种方式使列仅与最宽<li>一样宽。< / p>

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

问题在于代码是为我生成的，所以我无法添加任何额外的标记。我的经验告诉我这是不可能的，但如果有人能证明我错了，我会很高兴。

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。

<li>列表分为两列，自动/等宽</li>

2 个答案: