css - フローティング LI が親 UL の幅を均等に共有するようにするにはどうすればよいですか?

Question

先の注意：質問する前に答えを探しましたが、これを正しく行う方法を正確に説明しているものは見つかりませんでした。

私はいくつかの DIV を持っています。どこかに、親 DIV の 100% まで拡張することになっている UL があり、UL 内に (動的コンテンツのために変化する) 量の LI 要素があります。親ULが提供するスペースを均等に共有します（明らかに100％になるはずです）。

LI の inline-block や、LI の float:left や自動幅など、さまざまなソリューションを試しました。

ここでJSFiddleを作成しました。

(JS を使用せずに) 目的の結果を達成し、少なくとも主要なクロスブラウザー互換性を達成するにはどうすればよいですか?

score 3 · Accepted Answer

UL およびLI で使用display: table;します。width: 100%;display: table-cell;

ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
    background: #eee;
}

1 に答える 1