css - 親の幅に合わせて子要素の幅を広げる方法

Question

私はDOMに次のliのセットを持っています。ただし、それらはすべて最小幅のみを持ち、幅は各 li 内の要素に従ってに設定されます。

デモ：リンク

親CSS

#parent{
    width:1024px;
    height:90px;
    background-color:black
}

私が望むのは、li 要素の幅を親要素の幅全体に合わせて拡張することです。css3を使用してこれを達成するにはどうすればよいですか。

ありがとうございました。

Answer 1

1 つの方法display: flex;: http://jsfiddle.net/kCRc3/18/
もう 1 つはdisplay: table; http://jsfiddle.net/kCRc3/24/です。

display: table;より簡潔に見えるかもしれませんが、セルの内容の配置など、注意が必要ないくつかの癖があります。

Answer 2

それを達成するには、残りの幅を定義する新しいクラスを作成する必要があります (親の幅 - すべての幅 = 残りの幅) および<li class="header-tile newWidth">ieのいずれかに追加します。

.newWidth{
  width:100px; // this could be the remaining width
} 

Answer 3

あなたのコメントから、すべてのリスト項目を組み合わせて、それらのそれぞれではなく、親の幅を埋める必要があると思います（ul.

これを行う 1 つの方法は、次のフィドルのように、表示動作をテーブルに設定することです: http://jsfiddle.net/SURzu/

の幅を固定する必要がない場合は、とタグulの両方を に設定して、これを実現することもできます。ullidisplay: inline-block;