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.

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.

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.

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>

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>

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>

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

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

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>

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>