Ich wollte eine horizontale Navigation erstellen, die zentriert im Head der Seite dargestellt werden sollte. Semantisch korrekt natürlich als eine unordered list. Hier das reine HTML:

<div id=”navbar”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Das wurde dann mit folgendem CSS gestylt:

#nav {
width: 100%;
height: 30px;
position: relative;
overflow: hidden;
}

Nun stylen wir die eigentliche Navigation:

#nav ul {
position: relative;
list-style: none;
left: 50%;
}

#nav ul li {
position: relative;
right: 50%;
float: left;
}

Das wars schon. Die einzelnen Navigationspunkte werden jetzt alle nebeneinander stehen und gleichzeitig im Container “nav” zentriert sein.