osmer.de » studien » navigationsleiste.php
Groß-Gerau, 17.08.2016 Immer wieder wird danach gefragt, wie eine Liste mit ul zentriert oder rechtsbündig angeordnet werden kann.
So sieht der HTML-Code aus:
<div class=...> <ul> <li><a id="nav_home" href="/index.php">home</a></li> <li><a id="nav_software" href="/software.php">software</a></li> <li><a id="nav_dokumentation" href="/dokumentation.php">doku</a></li> <li><a id="nav_mich" href="/mich.php">über mich</a></li> <li><a id="nav_kontakt" href="/kontakt.php">kontakt</a></li> <li><a id="nav_studien" href="/studien/">studien</a></li> <li><a id="nav_humor" href="/humor.php">humor</a></li> </ul> </div>
Die "ungeschönte" Liste. Die Elemente a, li und ul sind lediglich mit border umschlossen, um ihre Fläche sehen zu können. Ansonsten keine CSS-Angaben.
<style> div.basis { background: #ff0; } div.basis a { border: .1pt solid #008; } div.basis li { border: .1pt solid #080; } div.basis ul { border: .1pt solid #f00; } </style>
So sieht es aus:
Wenn die li Elemente nebeneinander angeordnet werden sollen, dann
<style> div.variante1 li { float: left; } </style>
So sieht es aus. Problem: Da sämtliche li floaten, wird die Fläche für ul nicht aufgespannt:
Die Markierungszeichen entfernen, Abstand definieren. li bekommt einen margin-bottom, falls bei schmalem Viewport ein Zeilenumbruch erfolgt. Float ist am Ende mit clear:both wieder aufzuheben:
<style> div.variante2 ul { margin: 0; padding: 1px; list-style: none; } div.variante2 ul::after { content: ""; display: inline-block; clear: both; } div.variante2 li { float: left; margin: 0 .5em .5em 0; } div.variante2 li:last-child { margin-right: 0; } </style>
So sieht es aus:
<style> /* zusätzlich zu variante2 */ div.variante3 ul { text-align: center; } </style>
So einfach funktioniert es als nicht, float und center "beissen" sich:
Das ul Element darf nicht die volle Breite einnehmen und das Parent-Element muss seinen Inhalt zentrieren:
<style> /* zusätzlich zu variante2 */ div.variante3b { text-align: center; } div.variante3b ul { display: inline-block; } </style>
So einfach funktioniert es als nicht, float und center "beissen" sich:
Was mit center klappt, sollte auch mit right funktionieren.
<style> /* zusätzlich zu variante2 */ div.variante4 { text-align: right; } div.variante4 ul { display: inline-block; } </style>
So einfach funktioniert es als nicht, float und center "beissen" sich: