Есть ли способ разбить список на столбцы? - PullRequest
Новая
       62

Есть ли способ разбить список на столбцы?

109 голосов
/ 28 июня 2011

Моя веб-страница имеет «тонкий» список: например, список из 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 пунктов, мне не придется делать много ручных настроек, чтобы приспособить новый список.

Ответы [ 7 ]

226 голосов
/ 28 июня 2011

Решение 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 , если вы уже используете его.

18 голосов
/ 28 июня 2011

Если вы ищете решение, которое работает и в 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;
}

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

7 голосов
/ 06 сентября 2017

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

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

Это не будет работать в 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>
3 голосов
/ 21 ноября 2017

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

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>
1 голос
/ 01 мая 2018

Если вы можете поддерживать его, 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%;
1 голос
/ 12 сентября 2016

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

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

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

0 голосов
/ 13 января 2019

Первый способ для мобильных устройств - использовать 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>
...