CSS: List items of equal width (of the widest element in list)

Question

Is it possible to make all list items equally wide according to list's widest item? See the fiddle:

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

You can try to do it using on `.progress { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0 10px; }`. In this case you can make your `li` same size + responsive. The only problem is that they are **not sported on IE** — Timur, Feb 20 '18 at 08:03
Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) — leonheess, Aug 16 '21 at 18:57

SG_Rowin · Answer 1 · 2018-02-20T08:42:56.827

Use JavaScript to calculate width of each list, add them to an array, select max value and assign it to each list. The following code is tested and works great:

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";

}

Here is a jsFiddle: https://jsfiddle.net/rowin_aria/2szow6rb/2/

its not css, however few lines of JS will save you scratching your head plus this gives you an accurate result

score 0 · Answer 2 · answered Jun 01 '21 at 22:28

Shah's solution didn't quite do it for me. Each width was set to that of the widest element above it. I changed his code to make two loops. The first gathers all the widths and the second sets the width of each element to that of the widest one.

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";
}

score -1 · Answer 3 · answered Feb 20 '18 at 08:06

-1

In your css just add a fixed width, depending on the largest li element.`

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

answered Feb 20 '18 at 08:06

Yohanelly

69
1
9

2

that's only assuming you know the elements width earlier – aMJay Feb 20 '18 at 08:11
Yeah true, in this case it is known though. Not mentioned otherwise. – Yohanelly Feb 20 '18 at 08:15

score -1 · Answer 4 · answered Feb 20 '18 at 08:33

-1

You could use a flexbox for the list and let the items grow. See https://jsfiddle.net/82m71ztw/75/

answered Feb 20 '18 at 08:33

Gerard

15,418
5
30
52

CSS: List items of equal width (of the widest element in list)

4 Answers4