L'ultima voce dell'elenco in linea estende la larghezza rimanente del contenitore

Question

Sto cercando un modo per rendere l'ultimo elemento dell'elenco in linea esteso al resto del suo contenitore. Quindi ho qualcosa di simile.

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

Ora il numero di elementi della lista varia quindi non posso impostare l'ultimo elemento della lista ad una larghezza set. Devo farlo riempire tutto ciò che è rimasto nella larghezza del nav. Come usare solo CSS?

Answer 1

È possibile utilizzare display: table (e table-cell e, almeno per Firefox, table-row) con table-layout: fixed per ottenere l'algoritmo tavolo dove indicato larghezze dall'autore (voi) sono applicate dal browser e non il contrario, dove il browser fare è meglio adattare la larghezza delle celle al loro contenuto.
Quindi applicare una larghezza di 50 px a tutte le "celle" tranne l'ultima.
Ho usato table-row su ul e table sul suo nav genitore perché in Fx 18 impostazione display: table su ul non ha avuto l'effetto atteso (qualcosa legato al browser dover creare le parti mancanti aka un un'ombra elemento in qualità di fila -fra). Essendo molto descrittivo (questo elemento deve essere reso come una tabella e questo come una riga e questi come celle) aiuta.

Fiddle qui: 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: usando :last-child per impostare la larghezza è compatibile con IE9 +, non IE8 + come ho dichiarato nel violino ...

modifica: oops Non ho visto la tua classe .last all'ultimo li. Bene, hai capito :)
edit2: fiddle aggiornato usando questa classe e né :not() né :last-child pseudo