CSS
Horizontale Aufzählungslisten
- Details
- Veröffentlicht am Sonntag, 19. Oktober 2008 19:51
- Geschrieben von Jan Pionzewski
Mit CSS lassen sich sogar horizontale Aufzählungslisten definieren. Normalerweise werden diese ja untereinander aufgelistet. Mit folgendem Script lassen sie sich aber auch nebeneinander anordnen. Sinnvoll ist der Einsatz beispielsweise bei Navigationsmenüs, die oben oder unten auf der Seite erscheinen sollen.
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 wurden 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.
