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>

Basis

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:

Variante 1

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:

Variante 2

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:

Variante 3a: Zentriert

<style>
/* zusätzlich zu variante2 */
div.variante3 ul {
  text-align: center;
}
</style>

So einfach funktioniert es als nicht, float und center "beissen" sich:

Variante 3b: Zentriert

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:

Variante 4: Rechtsbündig

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: