На моей веб-странице есть «тонкий» список: например, список из 100 элементов по одному слову каждый. Чтобы уменьшить прокрутку, я хочу представить этот список в двух или даже четырех столбцах на странице. Как мне сделать это с помощью 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>

Я предпочитаю, чтобы решение было гибким, так что если список вырастет до 200 элементов, мне не нужно будет делать много ручных корректировок для соответствия новому списку.

Решение CSS: http://www.w3.org/TR/css3-multicol/

Поддержка браузера - это именно то, что вы ожидаете ..

Работает "везде", кроме Internet Explorer 9 и старше: 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;
}

См .: http://jsfiddle.net/pdExf/

Если требуется поддержка IE, вам придется использовать JavaScript, например:

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

Другое решение - вернуться к нормальному состоянию толькоfloat: left для IE . Порядок будет неправильным, но хотя бы похожим:

См .: http://jsfiddle.net/NJ4Hw/

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

Вы можете применить этот запасной вариант с помощью Modernizr, если вы уже его используете.

Если вы ищете решение, которое также работает в IE, вы можете разместить элементы списка слева. Однако в результате получится список, который закручивается змейкой, например:

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

Вместо аккуратных столбиков вроде:

item 1 | item 4
item 2 | 
item 3 | 

Код для этого будет:

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

Вы можете добавить нижнюю границу к lis, чтобы сделать поток элементов слева направо более очевидным.

Если вам нужно заранее заданное количество столбцов, вы можете использовать количество столбцов и промежуток между столбцами, как упоминалось выше.

Однако, если вам нужен один столбец с ограниченной высотой, который при необходимости может быть разбит на большее количество столбцов, этого можно довольно просто добиться, изменив отображение на гибкий.

Это не будет работать в IE9 и некоторых других старых браузерах. Вы можете проверить поддержку на Могу ли я использовать

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

Этот ответ не обязательно масштабируется, а требует лишь незначительных корректировок по мере роста списка. Семантически это может показаться немного нелогичным, поскольку это два списка, но в остальном он будет выглядеть так, как вы хотите, в любом браузере, когда-либо созданном.

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 - будь проще, используйте CSS Grid

Многие из этих ответов устарели, это 2020 год, и мы не должны разрешать людям, которые все еще используют IE9. Намного проще использовать CSS-сетку .

Код очень прост, и вы можете легко настроить количество столбцов, используя расширение grid-template-columns. Посмотрите на это, а затем поиграйте с этой скрипкой чтобы она соответствовала вашим потребностям.

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

Я обнаружил, что (в настоящее время) Chrome ( Version 52.0.2743.116 m) имеет массу причуд и проблем с csscolumn-count отношении элементов переполнения и элементов с абсолютным позиционированием внутри элементов, особенно с некоторыми переходами измерений.

это полный беспорядок, который нельзя исправить, поэтому я попытался решить эту проблему с помощью простого javascript и создал библиотеку, которая делает это - https://github.com/yairEO/listBreaker

Демо-страница

Если вы можете его поддержать, CSS Grid, вероятно, самый чистый способ превратить одномерный список в макет из двух столбцов с адаптивным внутренним пространством.

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>

Это две ключевые строки, которые дадут вам макет из двух столбцов.

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

Способ, ориентированный на мобильные устройства, - использовать столбцы CSS для создания опыта для небольших экранов, а затем использовать запросы мультимедиа для увеличения количества столбцов в каждой из определенных точек останова вашего макета.

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>

Вот что я сделал

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>