Kardeş elemanların en büyük kardeşin genişliğini nasıl kazanmasını sağlayabilirim?

Question

ul'un içinde 2-3 li var. ul, bir ayar genişliğine sahiptir. li etiketlerindeki metin değişecektir ancak her biri için en az 100 px'lik bir genişlik sağlamak istiyoruz. Daha fazla metinle li için sol ve sağlarında 15 piksel dolgu olduğundan emin olmak istiyoruz.

İdeal olarak, li'un tümü genişlik bakımından aynı olmalıdır, yani hepsi en büyük li genişliğini alacaktır. min-width:100px, li'un hepsinin 100 pikselin altında olduğu zaman aynı genişlikte olmasını sağlar, ancak bu genişliğin üstünde ise diğerleri eşleşecek şekilde ölçeklenmelidir.

Bunu yalnızca css/html kullanarak yapabilir miyim? Ben bunu kolayca javascript ile çözebileceğime inanıyorum ama bunu çözmek istemiyorum.

jsfiddle: https://jsfiddle.net/a8ho4b04/3/

html:

<ul> 
    <li class="li-1">--- --------</li> 
    <li class="li-2">------- ------ ------</li> 
    <li class="li-3">---</li> 
</ul> 

CSS:

ul { 
    display: block; 
    width: 450px; 
} 
li { 
    display: inline-block; 
    padding: 5px 15px; 
    border-radius: 3px; 
    box-sizing: border-box; 
    border: 1px solid black; 
    min-width: 100px; 
    text-align: center; 
} 
.li-1 { 
    background-color: green; 
} 
.li-2 { 
    background-color: yellow; 
} 
.li-3 { 
    background-color: cyan; 
} 

Answer 1

flexbox'a

ul { 
 
    width: 450px; 
 
    display: flex; 
 
    list-style: none; 
 
} 
 
li { 
 
    flex: 1; 
 
    border-radius: 3px; 
 
    padding: 5px 15px; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    min-width: 100px; 
 
    text-align: center; 
 
} 
 
.li-1 { 
 
    background-color: green; 
 
} 
 
.li-2 { 
 
    background-color: yellow; 
 
} 
 
.li-3 { 
 
    background-color: cyan; 
 
}

<ul> 
 
    <li class="li-1">--- --------</li> 
 
    <li class="li-2">------- ------ ------</li> 
 
    <li class="li-3">---</li> 
 
</ul>

CSS Tablolar

ul { 
 
    width: 450px; 
 
    display: table; 
 
    table-layout: fixed; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: table-cell; 
 
    border-radius: 3px; 
 
    padding: 5px 15px; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    min-width: 100px; 
 
    text-align: center; 
 
} 
 
.li-1 { 
 
    background-color: green; 
 
} 
 
.li-2 { 
 
    background-color: yellow; 
 
} 
 
.li-3 { 
 
    background-color: cyan; 
 
}

<ul> 
 
    <li class="li-1">--- --------</li> 
 
    <li class="li-2">------- ------ ------</li> 
 
    <li class="li-3">---</li> 
 
</ul>

Answer 2

için (piksel) onlara sabit bir genişlik vermek, ya da olabilir, en az genişliği (bağlı).