ul-Liste in Spalten mit column-count

Die Aufgabe: Für eine Übersichtsseite sollte eine unsortierte Liste mit 8 Listelementen in 2 Spalten dargestellt werden. Der Fluss der Liste sollte dabei erhalten bleiben und zusätzlich wollte man sich die Option offen halten, weitere Listelemente hinzufügen zu können und ggf. die Spaltenzahl auf 3 oder 4 zu erhöhen. Ich habe mich für column-count entschieden, damit war das super einfach umzusetzen.

ul#css3columnlist {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
ul#css3columnlist li{
line-height: 2em;
display: block;
}

  • Kategorie 1 Kategorie 1
  • Kategorie 2 Kategorie 2
  • Kategorie 3 Kategorie 3
  • Kategorie 4 Kategorie 4
  • Kategorie 5 Kategorie 5
  • Kategorie 6 Kategorie 6
  • Kategorie 7 Kategorie 7
  • Kategorie 8 Kategorie 8

Eine weitere Möglichkeit wäre hier auch gewesen, li-Elemente mit float:left zu nutzen. Hier allerdings wäre der „Textfluss“ von links nach rechts, also hier nicht so optimal. Schaut euch auch das zweite Beispiel einmal an.

ul#css3columnlistOptfloat {
width: 90%;
margin-bottom: 20px;
overflow:hidden;
}
ul#css3columnlistOptfloat li{
line-height: 2em;
float: left;
display: inline;
}
ul#css3columnlistOptfloat .double li {
width: 50%;
} /* 2 columns */

  • Kategorie 1 Kategorie 1
  • Kategorie 2 Kategorie 2
  • Kategorie 3 Kategorie 3
  • Kategorie 4 Kategorie 4
  • Kategorie 5 Kategorie 5
  • Kategorie 6 Kategorie 6
  • Kategorie 7 Kategorie 7
  • Kategorie 8 Kategorie 8

Welchen Weg würdet Ihr wählen, wenn der Textfluss nicht vorgegeben wäre? Oder verstehe ich den Textfluss falsch?

Kommentar (1)

  1. Genau danach habe ich gesucht. Ein schönes einfaches Beispiel.

    Vielen Dank!!!

Kommentare sind geschlossen.