Lassen Sie das letzte Inline-Listenelement die verbleibende Breite des Containers erweitern

Question

Ich suche nach einer Möglichkeit, das letzte Inline-Listenelement den Rest seines Containers zu erweitern. Ich habe so etwas.

<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; 
} 

Jetzt variiert die Anzahl der Listenelemente, sodass ich das letzte Listenelement nicht auf eine festgelegte Breite einstellen kann. Ich muss es füllen, was in der Breite des Nav übrig bleibt. Wie kann ich nur mit CSS arbeiten?

Answer 1

Sie können display: table verwenden (und table-cell und zumindest für Firefox, table-row) mit table-layout: fixed die Tabellen Algorithmus zu erhalten, wo Breiten vom Autor angegeben (Sie) werden vom Browser angewandt und nicht in die andere Richtung, wo der Browser tun es ist am besten, die Breite von Zellen an ihren Inhalt anzupassen.
Dann eine Breite von 50px auf alle "Zellen" mit Ausnahme der letzten.
I verwenden table-row auf ul und table auf seinen nav Eltern, weil am 18. Fx display: table auf ul Einstellung nicht die erwartete Wirkung hat (etwas an den Browser im Zusammenhang mit den fehlenden Teilen aka ein Schatten Element als Reihe handeln zu schaffen, in -zwischen). Sehr deskriptiv (dieses Element muss als Tabelle gerendert werden und dieses als Zeile und diese als Zellen) hilft.

Fiddle hier: 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: mit :last-child für Breiten Einstellung ist kompatibel mit IE9 +, nicht IE8 + als ich in der Geige angegeben ...

bearbeiten: oops Ich habe Ihre .last Klasse zuletzt li nicht gesehen. Nun, Sie bekommen die Idee :)
edit2: aktualisierte Geige mit dieser Klasse und weder :not() noch :last-child Pseudo