CSS:列表相等宽度的项目(列表中最宽的元素的)

Question

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

https://jsfiddle.net/82m71ztw/2/

<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/