Horizontale Aufzählungslisten

Mit CSS lassen sich unter dem Strich ganz einfach horizontale Aufzählungslisten definieren. Solche Listen sind dabei normalerweise untereinander ausgerichtet. Mit etwas CSS lassen sie sich aber auch nebeneinander anordnen. Sinnvoll ist das bspw. bei einem Menü, welches am oberen Rand der Seite erscheinen soll. Das Beitragsbild zeigt dir dabei eine mögliche Variante, wie so etwas aussehen könnte.

In diesem Artikel zeige ich dir, wie du ebenso horizontale Aufzählungslisten erstellen kannst.

 

Horizontale Aufzählungslisten mit CSS erstellen

Das nachstehende Beispiel soll dabei die Erstellung einer horizontalen Aufzählungsliste deutlich machen.

 

Horizontale Aufzählunglisten
So kann bspw. eine horizontale Aufzählungsliste aussehen (anklicken zum Vergrößern).

 

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>

 

Erklärung:

Im obigen Beispiel habe ich dabei zwei li Klassen erstellt. Das ist nötig, damit der Browser rechts vom letzten Eintrag keine Linie mehr anzeigt. Ob du das ebenso machen möchtest, bleibt dabei natürlich dir überlassen.

Mit den Attributen padding-left und padding-right lässt sich entsprechend der Abstand zu den gepunkteten Linien zwischen den einzelnen Punkten festlegen.

 

Hinweis:

Browser stellen CSS manchmal jedoch unterschiedlich dar. Ich empfehle dir daher, dieses CSS Snippet mit vielen Browsern zu testen. Es könnte dabei sonst zu unschönen Effekten kommen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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