Question

是否可以根据列表中最宽的项目使所有列表项同样宽？看小提琴：

<ol class="progress">
    <li class="active">First step: Choose</li>
    <li>Step two</li>
    <li>Three</li>
</ol>

Answer 1

使用JavaScript计算每个列表的宽度，将它们添加到数组中，选择最大值并将其分配给每个列表。以下代码经过测试并且运行良好：

var lists = document.querySelectorAll(".progress li");
var arrayList = [];
for (var i = 0; i < lists.length; i++) {
   var eachList = lists[i].offsetWidth;
   arrayList.push(eachList);
   var MaxWidth = Math.max.apply(null, arrayList);
   lists[i].style.width = MaxWidth +"px";

}

这是一个jsFiddle： https://jsfiddle.net/rowin_aria/2szow6rb/2/

它不是css，但是几行JS不会让你挠头，这样可以得到准确的结果

Answer 2

Shah 的解决方案并不适合我。每个宽度都设置为其上方最宽元素的宽度。我更改了他的代码以进行两个循环。第一个收集所有宽度，第二个将每个元素的宽度设置为最宽元素的宽度。

var lists = document.querySelectorAll(".progress li");
var arrayList = [];
for (var i = 0; i < lists.length; i++) {
   var eachList = lists[i].offsetWidth;
   arrayList.push(eachList);
}
var MaxWidth = Math.max.apply(null, arrayList);
for (var i = 0; i < lists.length; i++) {
   lists[i].style.width = MaxWidth +"px";
}

Answer 3

在你的css中添加一个固定的宽度，具体取决于最大的li元素。

li {
        list-style-type: none;
        counter-increment: item;
        width: 163px;
.....`

Answer 4

您可以使用flexbox列表，让项目增长。见https://jsfiddle.net/82m71ztw/75/

CSS：列出相等宽度的项目（列表中最宽的元素）

4 个答案: