最後のインラインリストアイテムをコンテナの残りの幅に延長する

Question

最後のインラインリストアイテムをコンテナの残りの部分に拡張する方法を探しています。だから私はこれのようなものを持っている。

<nav> 
    <ul> 
    <li></li> //width = 50px 
    <li></li> //width = 50px 
    <li class="last"></li> //width needs to fill the remaining 300px 
    </ul> 
</nav> 

nav { 
    width:400px; 
    height:50px; 
} 
nav > ul > li { 
    display:inline-block; 
    padding:5px; 
} 

ここで、リスト項目の数が異なるため、最後のリスト項目を設定された幅に設定することはできません。私はそれがナビの幅に残っているものを埋めるようにする必要があります。どのようにCSSだけを使用して？

Answer 1

あなたは著者（あなた）で示される幅は、ブラウザではなく、ブラウザが行う他の方法によって適用されているテーブルのアルゴリズムを得るためにtable-layout: fixedで（少なくともFirefoxの、table-rowのために、そしてtable-cellと）display: tableを使用することができますそれらのコンテンツにセルの幅を適合させるのが最良です。
最後のセルを除くすべての「セル」に50pxの幅を適用します。
Fxの18はulにdisplay: tableを設定する上で期待される効果（に行として働く影要素別名足りない部分を作成する必要がブラウザに関連する何かを持っていなかったので、私はそのnav親にulとtableにtable-rowを使用-の間に）。 非常に説明的です（この要素は表としてレンダリングする必要があります。この要素は行として、これらはセルとして）役立ちます。ここ

フィドル：http://jsfiddle.net/X6UX9/1/

HTML：

<nav> 
    <ul> 
    <li> //width = 50px</li> 
    <li>//width = 50px</li> 
    <li class="last">//width (...) 300px</li> 
    </ul> 
</nav> 

CSS：

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 
nav { 
    display: table; 
    table-layout: fixed; 
    width:400px; 
    height:50px; 
} 
nav > ul { 
     display: table-row; 
} 
nav li { 
    display: table-cell; 
    padding:5px; 
    outline: 1px dashed blue; 
} 
nav li:not(:last-child) { 
    width: 50px; 
} 

PS：幅を設定するための:last-childを使用して、私のようにIE9 +、ないIE8 +と互換性がありますフィドルで述べた...

編集：oops .lastクラスが最後に表示されませんでしたli。さて、あなたは考えを得る:)
edit2：このクラスを使用しているフィドル:not()も:last-child擬似