CSS：等宽的列表项（列表中最宽的元素）答案

【问题标题】：CSS: List items of equal width (of the widest element in list)CSS：等宽的列表项（列表中最宽的元素）
【发布时间】：2021-06-02 06:28:07
【问题描述】：

是否可以根据列表的最宽项使所有列表项的宽度相等？见小提琴：

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

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

【问题讨论】：

您可以尝试使用.progress { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0 10px; } 进行操作。在这种情况下，您可以使您的 li 大小相同 + 响应式。唯一的问题是它们在 IE 上不支持
这能回答你的问题吗？ Every item to have the same width as the widest element

标签： html css html-lists

【解决方案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 就可以省去你摸不着头脑的麻烦，而且这会给你一个准确的结果

【讨论】：

【解决方案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";
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

这只是假设您更早知道元素宽度
是的，但在这种情况下它是已知的。另有未提及。

【解决方案4】：

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

【讨论】：