Listeneinträge als Inline-Elemente darstellen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Listeneinträge sollen so dargestellt werden wie in der nächsten Abbildung: als seien sie Teil eines Absatzes. Die fett gedruckte und durch Kommata getrennte Darstellung der Liste wurde mit einem einfachen ul-Element erreicht.

Darstellung der Listeneinträge als Inline-Elemente innerhalb eines Absatzes

Abbildung: Darstellung der Listeneinträge als Inline-Elemente innerhalb eines Absatzes.

Lösung

Formatieren Sie die Absätze vor (und gegebenenfalls nach) der Liste:

<h3>Table of Contents</h3>
<p>As proposed, the contents of the paper will contain the following sections:</p>
<ul>
  <li>I'm not the Same Person I was in the Database</li>
  <li>Past Breaches of Our Privacy</li>
  <li>The Best of Intentions</li>
  <li>Whatever Happened to Automation?</li>
  <li class="last">The Smart Choice is Not Needing to Make One</li>
</ul>
<p>If there are any objections to how these sections are divided, please let <a href="nick@heatvision.com">Nicholas</a> know about it.</p>

Durch die CSS-Regeln legen Sie fest, dass Absätze als Inline-Elemente dargestellt werden sollen. Die Kommata zwischen den einzelnen Einträgen und der Punkt am Ende der Liste werden als automatisch erzeugte Inhalte eingefügt:

ul, li {
 display: inline;
 margin: 0;
 padding: 0;
 font-weight: bold;
 font-style: italic;
}
li:after {
 content: ", ";
}
li.last:after {
 content: ".";
}
p {
 display: inline;
}

Diskussion

Bei dieser Methode bleibt die Struktur der Listen und Absätze erhalten. Durch die Verwendung von CSS ist es allerdings möglich, Listen auch so darzustellen, als seien sie Teil eines Absatzes. Dabei wird die Standarddarstellung der Liste verändert, damit die Einträge als Teil eines Absatzes erscheinen.

Der wichtigste Teil dieser Lösung besteht darin, bei der Eigenschaft display für die Listeneinträge den Wert inline festzulegen. Anstatt Listenelemente übereinander und mit dem üblichen Leerraum ober- und unterhalb des Eintrags anzuzeigen, werden die Einträge hintereinander auf der gleichen Zeile dargestellt.

Warnung: Bitte beachten Sie, dass diese Methode beim Internet Explorer bis Version 6 leider nicht funktioniert, er unterstützt weder das Pseudoelement :after noch die Eigenschaft content. Dadurch fehlen bei der Darstellung im Internet Explorer die Kommata zwischen den Einträgen und der Punkt am Ende der Liste.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft display.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln