Breite des letzten <li> in einer waag. Navi. autom. auf "100%"

[uli]

Hi,

eine waagerechte Navigation "aus" gefloateten <li> Elementen:

  
<div id="navi_container">  
 <div id="sitenavi">  
  <ul class="nav">  
   <li class="nav-selected nav-path-selected">  
   <li class="">  
   <li class="">  
   <li class="">  
  </ul>  
 </div>  
</div>  

Der "sitenavi" Bereich hat per CSS eine feste Breite von 480px.
Die Listenelemente werden grafisch als Button dargestellt und richten sich in der Breite nach dem Textinhalt + padding. Aber mit einer Mindestbreite von 94px;

Es gibt einen hover Effekt welcher die Button beim Überfahren mit der Mouse färbt.

Wie kriegt man das hin, das die Listenelemente zusammen "automatisch" immer die volle Breite der "sitenavi" einnehmen?

Ein Versuch von mir war per :last-child dem letzten Element eine Breite von 100% zu geben. Dann wird dieses Element aber aus dem float "rausgenommen" und unter dem "sitenavi" Bereich angezeigt!

Es gibt bestimmt eine "einfach" CSS Lösung, - ich steh aber auf dem "Schlauch" :).

Vielen Dank für Eure super Hilfe hier!

LG uli

[Matthias Apsel]

Om nah hoo pez nyeetz, uli!

Es gibt bestimmt eine "einfach" CSS Lösung, - ich steh aber auf dem "Schlauch" :).

flexbox. http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts. Und als fallback display: inline statt float.

Matthias