Czy istnieje sposób na podział listy na kolumny?

Jeśli szukasz rozwiązania, które działa również w IE, możesz przenieść elementy listy po lewej stronie. Jednak to spowoduje, że lista będzie się kręcić wokół, jak Ta:

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

Zamiast schludnych kolumn, np.:

item 1 | item 4
item 2 | 
item 3 | 

Kod do tego to:

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

Możesz dodać border-bottom do li s, aby przepływ elementów od lewej do prawej był bardziej widoczny.

Jeśli chcesz mieć ustawioną liczbę kolumn, możesz użyć column-count i column-gap, jak wspomniano powyżej.

Jeśli jednak chcesz mieć pojedynczą kolumnę o ograniczonej wysokości, która w razie potrzeby podzieliłaby się na więcej kolumn, można to osiągnąć po prostu zmieniając wyświetlacz na flex.

To nie zadziała na IE9 i niektórych innych starych 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>

Odkryłem, że (obecnie) Chrome (Version 52.0.2743.116 m) ma mnóstwo dziwactw i problemów z css column-count dotyczących elementów przelewowych i bezwzględnych elementów umieszczonych wewnątrz elementów, szczególnie przy niektórych przejściach wymiarów..

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

Strona Demo

Ta odpowiedź nie musi skalować , ale wymaga tylko drobnych poprawek w miarę wzrostu listy. Semantycznie może to wydawać się trochę sprzeczne z intuicją, ponieważ są to dwie listy, ale poza tym będzie wyglądać tak, jak chcesz w każdej przeglądarce, jaką kiedykolwiek stworzono.

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>

Jeśli możesz go wspierać CSS Grid jest prawdopodobnie najczystszym sposobem na tworzenie 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>

Są to dwie kluczowe linie, które dadzą ci układ 2 kolumn

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