Meine Webseite enthält eine "dünne" Liste: Zum Beispiel eine Liste mit 100 Elementen mit jeweils einem Wort Länge. Um das Scrollen zu reduzieren, möchte ich diese Liste in zwei oder sogar vier Spalten auf der Seite darstellen. Wie soll ich das mit CSS machen?
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Ich bevorzuge, dass die Lösung flexibel ist, sodass ich, wenn die Liste auf 200 Elemente anwächst, nicht viele manuelle Anpassungen vornehmen muss, um die neue Liste aufzunehmen.
css
html-lists
user776676
quelle
quelle
Antworten:
Die CSS-Lösung lautet: http://www.w3.org/TR/css3-multicol/
Die Browserunterstützung ist genau das, was Sie erwarten würden.
Es funktioniert "überall" außer Internet Explorer 9 oder älter: http://caniuse.com/multicolumn
Siehe: http://jsfiddle.net/pdExf/
Wenn IE-Unterstützung erforderlich ist, müssen Sie JavaScript verwenden, zum Beispiel:
http://welcome.totheinter.net/columnizer-jquery-plugin/
Eine andere Lösung besteht darin, nur
float: left
für den IE auf den Normalzustand zurückzugreifen . Die Reihenfolge wird falsch sein, aber zumindest wird es ähnlich aussehen:Siehe: http://jsfiddle.net/NJ4Hw/
Sie können diesen Fallback mit Modernizr anwenden, wenn Sie ihn bereits verwenden.
quelle
li
in jeder Spalte zu entfernen ?list-style-position: inside;
die speziell auf das von @vsync aufgezeigte Problem eingeht, glaube ich.li { break-inside: avoid; }
: jsfiddle.net/thirtydot/pdExf/903 . Ich bin mit CSS-Spalten nicht allzu vertraut, daher gibt es möglicherweise einen besseren Weg.Wenn Sie nach einer Lösung suchen, die auch im IE funktioniert, können Sie die Listenelemente nach links verschieben. Dies führt jedoch zu einer Liste, die sich wie folgt schlängelt:
Anstelle von ordentlichen Spalten wie:
Der Code dafür wäre:
Sie können dem
li
s einen Rand unten hinzufügen , um den Fluss der Elemente von links nach rechts deutlicher zu machen.quelle
Wenn Sie eine voreingestellte Anzahl von Spalten wünschen, können Sie die Anzahl der Spalten und die Spaltenlücke verwenden, wie oben erwähnt.
Wenn Sie jedoch eine einzelne Spalte mit begrenzter Höhe wünschen, die bei Bedarf in mehrere Spalten aufgeteilt wird, können Sie dies ganz einfach erreichen, indem Sie die Anzeige auf Flex ändern.
Dies funktioniert nicht mit IE9 und einigen anderen alten Browsern. Sie können den Support unter Kann ich verwenden überprüfen
quelle
column-count
wird ungerade Anzahl von Zeilen innerhalb der Spalten tun. Wie 6 Elemente in der ersten Spalte, dann 4, dann 6, dann 5.Diese Antwort muss nicht unbedingt skaliert werden, sondern erfordert nur geringfügige Anpassungen, wenn die Liste wächst. Semantisch mag es ein wenig kontraintuitiv erscheinen, da es sich um zwei Listen handelt, aber ansonsten sieht es in jedem Browser so aus, wie Sie es möchten.
quelle
2020 - halten Sie es einfach, verwenden Sie CSS Grid
Viele dieser Antworten sind veraltet, es ist 2020 und wir sollten keine Leute befähigen, die noch IE9 verwenden. Es ist viel einfacher, nur das CSS-Raster zu verwenden .
Der Code ist sehr einfach und Sie können leicht anpassen, wie viele Spalten mit dem Code vorhanden sind
grid-template-columns
. Sehen Sie sich das an und spielen Sie dann mit dieser Geige , um Ihren Bedürfnissen gerecht zu werden.quelle
Ich habe festgestellt, dass (derzeit) Chrome (
Version 52.0.2743.116 m
) Unmengen von Macken und Problemen mit CSS incolumn-count
Bezug auf Überlaufelemente und absolut positionierte Elemente in Elementen aufweist, insbesondere bei einigen Dimensionsübergängen.Es ist ein totales Chaos und kann nicht behoben werden. Deshalb habe ich versucht, dies durch einfaches Javascript anzugehen, und eine Bibliothek erstellt, die dies tut - https://github.com/yairEO/listBreaker
Demoseite
quelle
Wenn Sie es unterstützen können, ist CSS Grid wahrscheinlich die sauberste Methode, um eine eindimensionale Liste in ein zweispaltiges Layout mit ansprechendem Interieur zu verwandeln.
Dies sind die beiden Hauptzeilen, mit denen Sie Ihr zweispaltiges Layout erhalten
quelle
Die erste Möglichkeit für Mobilgeräte besteht darin, mithilfe von CSS-Spalten eine Erfahrung für kleinere Bildschirme zu erstellen und dann mithilfe von Medienabfragen die Anzahl der Spalten an jedem der definierten Haltepunkte Ihres Layouts zu erhöhen.
quelle
Hier ist was ich getan habe
quelle