26.09.2010

Listen und Verzeichnisse mit rechtsbündigen Angaben

Mitunter benötigt man eine Art Inhalts- oder Kapitelverzeichnis, bei dem linksbündig ein Text und rechtsbündig eine Seitenangabe, Kapitelnummer o.ä. steht.
Das Problem dabei: Wie schafft man es, dass innerhalb einer Zeile ein Teil des Textes linksbündig und gleichzeitig ein anderer Teil rechtsbündig angeordnet werden. Die Lösung ist recht einfach, man muss lediglich von der Reihenfolge her etwas umdenken:

Für unser Verzeichnis verwenden wir eine ul-Liste und weisen dieser zwecks Formatierung einen ID zu.
Innerhalb der Listeneinträge schreiben wir - und das ist die Abweichung zur späteren Darstellung - zunächst die Seiten- oder Kapitelzahl in einen span. Sie soll rechtsbündig dargestellt werden. Danach folgt der Text, den wir am Zeilenanfang linksbündig haben wollen. Daraus ergibt sich folgendes HTML-Markup:

<ul id="liste">
<li><span>Seite</span>Inhaltsverzeichnis</li>
<li><span>3</span>Einleitung</li>
<li><span>15</span>Die Liste - das Instrument für viele Zwecke</li>
<li><span>121</span>Links- und rechtsbündige Zeileninhalte einer Liste</li>
</ul>

Unformatiert sieht das Ergebnis dann so aus und ist noch wenig nützlich:

Mit wenigen CSS-Angaben erreichen wir jedoch unser Ziel:
Schalten wir zunächst die browserspezifischen Listenabstände aus und entfernen die Aufzählungspunkte. Ferner geben wir der Liste die gewünschte Breite und lediglich zwecks Verdeutlichung einen kleinen Rahmen, etwas Hintergrundfarbe und einen kleinen Innenabstand:

#liste {
margin: 0;
padding: 0;
list-style: none;
width: 400px;
border: 1px solid #f00;
background: #CAFF70;
padding: 10px;
}

Nun sorgen wir dafür, dass sich die Seitenzahlen innerhalb des spans rechtsbündig anordnen. Probates Mittel dafür ist die Eigenschaft "float: right":

#liste span {
float: right;
}

Die einzelnen Listeneinträge werden jetzt noch gecleart um sicherzugehen, dass sie sich untereinander anordnen und den vorangegangenen float im span aufheben.

#liste li {
clear: right;
}

Damit sind unsere Vorgaben erreicht, wie das Ergebnis zeigt:

nach oben