Liste in mehreren Spalten

Question

Ich habe eine Liste mit 10 (li) Elementen. Diese werden in einer einzigen Spalte angezeigt.

Wenn ich die Höhe dieser Liste festlege, wie kann ich sie dann in zwei oder drei Spalten anzeigen?

Answer 1

Können Sie dies überprüfen Listen mit mehreren Spalten

Answer 2

Es gibt eine CSS3-Lösung dafür, aber sie ist noch nicht in allen Browsern implementiert. Siehe dieses Beispiel, das die CSS-Eigenschaft column-count :

http://jsfiddle.net/hwzpy/

Zurzeit funktioniert es allerdings nur in FF, Safari und Chrome. Ansonsten müssen Sie Javascript verwenden oder die Liste in zwei Listen aufteilen.

-edit- Die Float-Variante, wie in anderen Antworten verlinkt, ist wirklich klasse, die kannte ich noch nicht.

Answer 3

Diese Frage wurde schon einmal gestellt. Siehe Diskussion auf html css - wie erstellt man eine mehrspaltige Liste? . Außerdem gibt es eine hilfreiche A List Apart Artikel in dem sechs Methoden für diesen Zweck beschrieben werden.

Answer 4

Sie können dies ganz einfach mit der jQuery-Spalten Plugin Um z.B. eine ul mit der Klasse .mylist in 5 Spalten aufzuteilen, würden Sie folgendes tun

$(document).ready( function () {
  $('.mylist').cols(5);
});

Hier ist ein Live-Beispiel auf jsfiddle