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

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

6 93
css css3 html-lists

6 ответов:

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

190

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

вы можете добавить border-bottom к lis, чтобы сделать поток элементов слева направо более очевидной.

16

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

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

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

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

демо-страницы

1

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

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

Если вы можете поддерживать его 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>

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

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