HTML/CSS: Listenelemente horizontal verteilen

Für Einträge mit gleichem Abstand eignet sich:


li { display:inline; }

Für gleichverteilte Listeneinträge hingegen:


float:left;

Im zweiten Fall kann man noch eine Breite mit width vergeben, weil das li Element weiterhin als Block-Element behandelt wird. Damit ist die Breite eines Listeneintrages unabhängig von dessen Inhalt.

Bei Inline Elementen ist das nicht mehr möglich. Hier kann man mit padding für Abstand sorgen. Beispiel:

Stylesheet:

 ul { padding-left:0; margin:0; }
 li { display:inline; padding-left:45px; }
 li.first { padding-left:0; }

HTML:

<ul>
  <li class="first">Erster</li>
  <li>Zweiter</li>
  <li>Letzter</li>
</ul>

Verwandte Artikel:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.