Horizontale Aufzählungslisten

Mit CSS lassen sich ganz einfach horizontale Aufzählungslisten definieren. Diese sind normalerweise jedoch untereinander aufgelistet.

Mit folgendem CSS-Snippet lassen sie sich aber auch nebeneinander anordnen. Sinnvoll ist der Einsatz beispielsweise bei Navigationsmenüs die oben oder unten auf der Website erscheinen sollen.

 

Horizontale Aufzählungslisten erstellen

Das nachstehende Code-Beispiel verdeutlicht die Erstellung von horizontalen Aufzählungslisten.

 

Code-Beispiel:

<html>
<head>
<style type="text/css">
LI.normal {
 display: inline;
 padding-left: 10px;
 padding-right: 10px;
 border-right: 2px dotted black;
}
 LI.ende {
 display: inline;
 padding-left: 10px;
 padding-right: 10px;
 }
 
</style>
<title>Horizontale Aufzählungslisten</title>
</head>
<body>

<ul>
 <li class="normal">Home</li>
 <li class="normal">Inhalte</li>
 <li class="ende">Feedback</li>
</ul>

</body>
</html>

 

Erläuterung:

Für dieses Beispiel habe ich zwei li-Klassen definiert. Dies dient dazu, dass der letzte Menüeintrag keine gepunktete Linie rechts von ihm bekommt. Das ist aber Geschmackssache und lässt sich natürlich frei konfigurieren. Über die Attribute padding-left: und padding-right: lassen sich die Abstände zu den gepunkteten Linien zwischen den einzelnen Aufzählungszeichen festlegen.

 

Hinweis:

Bitte beachte, dass verschiedene Browser CSS-Code manchmal unterschiedlich interpretieren. Daher ist es empfehlenswert, die Website mit unterschiedlichen Browsern zu testen, bevor du sie veröffentlichst.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.