Gibt es eine Möglichkeit, eine Liste in Spalten zu unterteilen?

119

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.

user776676
quelle
Es gibt eine Bibliothek, die das tut - github.com/yairEO/listBreaker
vsync
Ich glaube, dass die CSS-Spaltenoption ausreicht. Diese Option ist einfach zu verwenden und bei Bedarf zu ändern. Hier haben Sie es im Detail erklärt - kolosek.com/css-columns
Nesha Zoric

Antworten:

253

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

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

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, nurfloat: 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/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

Sie können diesen Fallback mit Modernizr anwenden, wenn Sie ihn bereits verwenden.

dreißig Punkte
quelle
Gibt es eine Möglichkeit, den oberen Rand am ersten liin jeder Spalte zu entfernen ?
Ja, Barry,
2
Dies funktioniert hervorragend für einen festen Bereich, wird jedoch zu einem Problem bei reaktionsschnellen Designs, da die Spalten nicht wie bei Verwendung von display: inline oder inline-block zusammenfallen.
Unifiedac
4
Interessante Tatsache: IE ist der einzige große Desktop-Browser, der diese Funktion ohne Präfixe vollständig unterstützt (seit IE10) ... Oh, die Ironie ...
NemoStein
1
Für eine bessere browserübergreifende Unterstützung kann es erforderlich sein, diese zusätzliche Eigenschaft aufzunehmen, list-style-position: inside;die speziell auf das von @vsync aufgezeigte Problem eingeht, glaube ich.
ThisClark
4
@PrafullaKumarSahu: Versuchen Sie 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.
30.
19

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:

item 1 | item 2 | item 3
item 4 | item 5

Anstelle von ordentlichen Spalten wie:

item 1 | item 4
item 2 | 
item 3 | 

Der Code dafür wäre:

ul li {
  width:10em;
  float:left;
}

Sie können dem lis einen Rand unten hinzufügen , um den Fluss der Elemente von links nach rechts deutlicher zu machen.

Matt Hampel
quelle
Während es möglicherweise für eine bestimmte Anzahl von Elementen funktioniert, ist das Ergebnis für nur 2 Elemente nicht schön.
vsync
Eine weitere funktionierende CSS-Lösung für die "ordentlichen Spalten": stackoverflow.com/q/54982323/1066234
Kai Noack
10

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

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<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>

Maciej Poleski
quelle
2
Sehr nah an dem, was ich anstrebe. Der einzige Nachteil ist, dass sich die Breite der Spalten nicht an den Inhalt anpasst (versuchen Sie es mit Elementen unterschiedlicher Länge). Nicht sicher, wie die Spaltenbreite definiert ist. Vielleicht das mit dem ersten Element? Auf jeden Fall irgendwelche Hinweise, wie man dies überwinden kann?
Jorgeh
Wäre es möglich, die Anzahl der Spalten anstelle der Höhe zu begrenzen? Ich brauche die Elemente, um in vier Spalten zu füllen, und das CSS column-countwird ungerade Anzahl von Zeilen innerhalb der Spalten tun. Wie 6 Elemente in der ersten Spalte, dann 4, dann 6, dann 5.
Virge Assault
Wäre schön, wenn Sie die Elemente zB "Element 1", "Element 2"
beschriften,
3

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.

ul {
  float: left;
}

ul > li {
  width: 6em;
}
<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Alan Hape
quelle
2

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.

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<ul class="grid-list">
  <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>
  <li>item</li>
  <li>item</li>
</ul>

maxshuty
quelle
1
Dies ist die beste Lösung für mich.
Patee Gutee
1

Ich habe festgestellt, dass (derzeit) Chrome ( Version 52.0.2743.116 m) Unmengen von Macken und Problemen mit CSS in column-countBezug 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

vsync
quelle
Ich bevorzuge das jQuery Columnizer-Plugin, meiner Meinung nach hatte es eine bessere Funktionalität für das, was ich tat (konnte alphabetisch sortieren, absteigend oder aufsteigend, Spaltenanzahl, Spaltenbreite und mehr). jQuery Columnizer - WelcomeToTheInter.Net
Brandito
@Brandito - nun, der Columnizer-Code hat sicher mehr Optionen, da es fast 1.000 Codezeilen sind, im Vergleich zu meinem, der ungefähr 120 Zeilen umfasst. Aber er macht den Job gut
vsync
Ja, aber mein Problem brauchte die Liste, um als eine Liste zu bleiben. Was nützlicher / notwendiger ist, hängt vom Anwendungsfall ab.
Brandito
0

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.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

Dies sind die beiden Hauptzeilen, mit denen Sie Ihr zweispaltiges Layout erhalten

display: grid;
grid-template-columns: 50% 50%;
mattLummus
quelle
0

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.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}
<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>

Josh Habdas
quelle
0

Hier ist was ich getan habe

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>

GuruKay
quelle