どのようにして兄弟要素を最大の兄弟の幅にすることができますか？

Question

私は、ulの中に2-を持っています。 ulには設定された幅があります。 liタグのテキストは変更されますが、それぞれに100pxの最小幅を維持したいと考えています。より多くのテキストを含むliの場合、左右に15ピクセルのパディングがあることを確認します。理想的には、liはすべて、幅が同じである、すなわち最大幅の幅がすべてliであることが理想的である。 min-width:100pxは、liがすべて100ピクセル未満のときに同じ幅になるようにしますが、1つがこの幅を超える場合、他のものは一致するように拡大する必要があります。

私はこれをcss/htmlだけで使用できますか？私はこれをjavascriptでやや簡単に解決できると信じていますが、私はそれをなくして解決したいと思います。

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

HTML：あなたはそれらを（ピクセル単位）の固定幅を与えることができる

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

フレキシボックス

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テーブル

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

、または可能な最小幅（：

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

CSS相対）。