最後のインラインリストアイテムでコンテナの残りの部分を拡張する方法を探しています。だから私はこのようなものを持っています。
<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のみを使用する方法は？
を使用してdisplay: table（そしてtable-cell、少なくともFirefoxの場合はtable-row） 、作成table-layout: fixed者（あなた）によって示された幅がブラウザによって適用されるテーブルアルゴリズムを取得できますが、ブラウザがセルの幅を適応させるために最善を尽くす他の方法ではありません彼らのコンテンツに。
次に、最後のセルを除くすべての「セル」に50pxの幅を適用します。Fx 18でオンに設定しても期待した効果がなかったため、親の上と上で
使用しました（ブラウザが欠落している部分、つまり中間の行として機能するシャドウ要素を作成する必要があることに関連するもの）。非常にわかりやすい（この要素はテーブルとして、これは行として、これらの要素はセルとしてレンダリングする必要があります）table-rowultablenavdisplay: tableul）役立ちます。
ここでフィドル：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幅の設定に使用することは、フィドルで述べたようにIE8 +ではなく、IE9+と互換性があります...
編集：おっと、私は.last最後にあなたのクラスを見ませんでしたli。さて、あなたはアイデアを得る:)
edit2：このクラスを使用してフィドルを更新し、疑似:not()も:last-child疑似もしない
2019年の更新：
ul {
display: flex;
}
ul li:last-child {
flex: 1;
}