Listenpunkte mit CSS horizontal verteilen

[Jan (Gast)]

Hallo,

ich habe eine Klasse "navi" mit einer quasi-festen Breite(width ist 
100%, das Eltern-Element hat jedoch eine feste Breite von 870px).
In diesem Bereich möchte ich nun z.B. 5 Menüpunkte verteilen, so dass 
der Menüpunkt ganz links linksbündig und der Menüpunkt ganz rechts 
rechtsbündig angezeigt wird. Die Menüpunkte dazwischen sollen dann 
gleichmäßig so über die verbleibende Breite verteilt werden, so dass der 
Platz zwischen benachbarten Menüpunkten identisch ist. Die Menüpunkte 
stehen zwar auch schon fest, sind aber je nach Text unterschiedlich lang 
und sollen daher auch nur so breit werden, wie es die jeweilige 
Beschriftung erforderlich macht. Ich werde natürlich darauf achten, dass 
die Menüpunkte vom Platz her vollständig in den Menü-Bereich 
hineinpassen.

Die Liste ist klassisch aus ul und li's aufgebaut und ich kann sowohl 
den ersten Listenpunkt als auch den letzten Listenpunkt via CSS 
formatieren.

Lässt sich so ein Menü(erster Menüpunkt klebt links, die dazwischen 
teilen sich gemäß ihrer Textlänge auf und der letzte Menüpunkt klebt 
rechts) mit Hilfe von CSS überhaupt bewerkstelligen?
Falls ja, wie(ein Beispiel wäre phantastisch)?

Viele Grüße,
Jan

[Stefan R. (srand)]

Woran hängts denn?

Das geht wie immer mit "margin: 0 auto;" und "width: $foo;" für die ul, 
sowie dann passender margins für die li.

"display: inline;" nicht vergessen.

[D. I. (Gast)]

display: inline-block; reicht aus

[Daniel F. (df311)]

als ausgangspunkt:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: inline-block;
  float: left;
  margin: 0 1em;
}