HTML-Liste horizontal darstellen

Mittels CSS ist es gang einfach möglich, HTML Listenelemente einer unordered-list ( <ul> ) horizontal darzustellen. Dies ist z.B. dann interessant, wenn die Liste als horizontale Navigation dienen soll.

Werbung

Als Ausgangslage verwende ich folgende Liste:

<ul>
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
</ul>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

Um nun die Listenelemente horizontal anzuzeigen, werden die einzelnen list-items mittels CSS formatiert. Dazu wird der Textfluss mit float:left; geändert. Im Anschluss an die Liste setze ich mit clear:both; die Fortsetzung wieder unterhalb fort.

<style>
li.hm1 {
	float:left;
}

</style>
<ul>
	<li class="hm1">Punkt 1</li>
	<li class="hm1">Punkt 2</li>
	<li class="hm1">Punkt 3</li>
</ul>
<div style="clear:both"></div>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

Die einzelnen Listenpunkte sind nun horizontal angeordnet. Leider sieht das ganze noch nicht sehr ansprechend aus. Deshalb werden im nächsten Schritt die Aufzählungspunkte entfernt und der Abstand zwischen den einzelnen Punkten erhöht.

<style>
li.hm2 {
	/* Textfluss ändern */
	float:left;
	/* Aufzählungspunkte entfernen */
	list-style-type:none;
	/* Abstand */
	margin-right:15px;
}

</style>
<ul>
	<li class="hm2">Punkt 1</li>
	<li class="hm2">Punkt 2</li>
	<li class="hm2">Punkt 3</li>
</ul>
<div style="clear:both"></div>

So sieht’s aus:

• Punkt 1
• Punkt 2
• Punkt 3

Weitere Tipps und Tricks finden Sie in meinen Beiträgen zum Thema CSS.