Son satır içi liste öğesini kapsayıcının kalan genişliğini uzatın

Question

Son satır içi liste öğesinin kapsayıcının kalan kısmını uzatmasını sağlamanın bir yolunu arıyorum. Yani böyle bir şeyim var.

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

Şimdi, liste öğelerinin sayısı değişir; bu nedenle son liste öğesini ayarlanmış bir genişliğe ayarlayamıyorum. Onu, navun genişliğinde kalan şeyi doldurmak zorundayım. Sadece css ile nasıl kullanılır?

Answer 1

yazar tarafından genişlikleri belirtilen tablo algoritmasını almak için table-layout: fixed ile (en azından Firefox, table-row için ve table-cell ve) display: table kullanabilirsiniz (siz) tarayıcı yapmak başka bir yol tarayıcısı tarafından uygulanan ve verilmez Hücrelerin genişliğini içeriğine uyarlamak için en iyisi.
Son olarak sonuncusu hariç tüm "hücrelere" 50px genişlik uygulayarak.
I (satır gibi davranan bir gölge eleman aka eksik parçalarını oluşturmak zorunda tarayıcıya ilgili bir şey beklenen etkisi olmadı çünkü Fx ul üzerinde display: table ortaya koyan 18 üzerindeki nav ebeveyn üzerinde ul ve table üzerinde table-row kullanılan -arasında). Çok açıklayıcı (bu öğe bir tablo olarak oluşturulmalı ve bu bir satır olarak ve bunlar hücre olarak) yardımcı olur. Burada

Fiddle: 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: genişlikleri ayarlamak için :last-child kullanarak I olarak IE9 +, değil IE8 + ile uyumludur kemanda belirtilen ...

düzenleme: oops Son li üzerinde .last sınıfını görmedim. Eh, fikir olsun :)
edit2: updated keman nav her zaman geniş 400px olacak bu sınıfı ve ne :not() ne de :last-child sahte