Moja strona internetowa ma „wąską” listę: na przykład listę 100 elementów o długości jednego słowa. Aby ograniczyć przewijanie, chcę przedstawić tę listę w dwóch lub nawet czterech kolumnach na stronie. Jak mam to zrobić z CSS?

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

Wolę, aby rozwiązanie było elastyczne, więc jeśli lista powiększy się do 200 pozycji, nie będę musiał wykonywać wielu ręcznych dostosowań, aby dostosować się do nowej listy.

Rozwiązanie CSS to: http://www.w3.org/TR/css3-multicol/

Obsługa przeglądarki jest dokładnie tym, czego można się spodziewać.

Działa „wszędzie” z wyjątkiem Internet Explorera 9 lub starszego: 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;
}

Zobacz: http://jsfiddle.net/pdExf/

Jeśli wymagana jest obsługa IE, będziesz musiał użyć JavaScript, na przykład:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Innym rozwiązaniem jest powrót do normalnego tylkofloat: left dla IE . Kolejność będzie błędna, ale przynajmniej będzie wyglądać podobnie:

Zobacz: http://jsfiddle.net/NJ4Hw/

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

Możesz zastosować tę rezerwę za pomocą Modernizr, jeśli już jej używasz.

Jeśli szukasz rozwiązania, które działa również w IE, możesz przesunąć elementy listy w lewo. Jednak spowoduje to listę, która wije się wokół, na przykład:

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

Zamiast zgrabnych kolumn, takich jak:

item 1 | item 4
item 2 | 
item 3 | 

Kod, który to zrobi, to:

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

Możesz dodać obramowanie do dołu do lis, aby przepływ elementów od lewej do prawej był bardziej widoczny.

Jeśli chcesz mieć określoną liczbę kolumn, możesz użyć liczby kolumn i odstępu między kolumnami, jak wspomniano powyżej.

Jeśli jednak potrzebujesz pojedynczej kolumny o ograniczonej wysokości, która w razie potrzeby podzieliłaby się na więcej kolumn, można to osiągnąć w prosty sposób, zmieniając wyświetlanie na flex.

To nie zadziała w IE9 i niektórych innych starszych przeglądarkach. Możesz sprawdzić wsparcie na Czy mogę użyć

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

Ta odpowiedź niekoniecznie jest skalowana, ale wymaga jedynie niewielkich korekt w miarę powiększania się listy. Semantycznie może się to wydawać trochę sprzeczne z intuicją, ponieważ są to dwie listy, ale poza tym będzie wyglądać tak, jak chcesz w każdej przeglądarce.

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 - nie komplikuj, używaj siatki CSS

Wiele z tych odpowiedzi jest nieaktualnych, jest rok 2020 i nie powinniśmy włączać osób, które nadal używają IE9. O wiele prostsze jest użycie siatki CSS .

Kod jest bardzo prosty i możesz łatwo dostosować liczbę kolumn za pomocą grid-template-columns. Zobacz to, a następnie pobaw się tymi skrzypcami, aby dopasować je do swoich potrzeb.

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

Zauważyłem, że (obecnie) Chrome ( Version 52.0.2743.116 m) ma mnóstwo dziwactw i problemów z css column-countdotyczących elementów przepełnionych i elementów pozycjonowanych bezwzględnie w elementach, szczególnie w przypadku niektórych przejść wymiarów.

to totalny bałagan i nie można go naprawić, więc próbowałem rozwiązać ten problem za pomocą prostego javascript i utworzyłem bibliotekę, która to robi - https://github.com/yairEO/listBreaker

Strona demonstracyjna

Jeśli możesz to wesprzeć Siatka CSS jest prawdopodobnie najczystszym sposobem na utworzenie jednowymiarowej listy w układzie dwóch kolumn z responsywnymi wnętrzami.

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>

To są dwie kluczowe linie, które dadzą ci układ 2 kolumn

display: grid;
grid-template-columns: 50% 50%;

Pierwszy sposób na urządzenia mobilne polega na użyciu kolumn CSS do tworzenia wrażeń na mniejszych ekranach, a następnie za pomocą zapytań o media w celu zwiększenia liczby kolumn w każdym ze zdefiniowanych punktów przerwania układu.

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>

Oto co zrobiłem

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>