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


119

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


Для этого есть библиотека - github.com/yairEO/listBreaker
vsync

Я считаю, что подойдет вариант столбца CSS. Эту опцию легко использовать и при необходимости можно изменить. Здесь вы подробно объяснили это - kolosek.com/css-columns
Неша Зорич

Ответы:


254

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


Есть ли способ удалить верхнюю границу первой liв каждом столбце?
Да, Барри,

2
Это отлично работает для фиксированного пространства, но становится проблемой для адаптивного дизайна, поскольку столбцы не сворачиваются, как при использовании display: inline или inline-block.
unifiedac

4
Интересный факт: IE - единственный крупный настольный браузер, который полностью поддерживает эту функцию без префиксов (начиная с IE10) ... О, ирония судьбы ...
NemoStein

1
Возможно, для лучшей поддержки кроссбраузерности потребуется включить это дополнительное свойство, list-style-position: inside;которое, по моему мнению, конкретно решает проблему, указанную @vsync.
ThisClark

4
@PrafullaKumarSahu: Попробуйте li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903 . Я не слишком знаком с столбцами CSS, так что может быть способ получше.
30

19

Если вы ищете решение, которое также работает в 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, чтобы сделать поток элементов слева направо более очевидным.


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

Еще одно рабочее решение CSS для «аккуратных столбцов»: stackoverflow.com/q/54982323/1066234
Кай Ноак

10

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

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

Это не будет работать в 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>


2
Очень близко к тому, что мне нужно. Единственным недостатком является то, что ширина столбцов не адаптируется к содержимому (попробуйте использовать элементы разной длины). Не знаю, как определяется ширина столбца. Может быть, с первым элементом? В любом случае есть какие-нибудь указатели, как это побороть?
Хорхе

Можно ли ограничить количество столбцов, а не высоту? Мне нужно, чтобы элементы заполнялись в четыре столбца, а css column-countбудет делать нечетное количество строк в столбцах. Примерно 6 пунктов в первом столбце, затем 4, затем 6, затем 5.
Virge Assault

Было бы неплохо, если бы вы пометили элементы, например, «Элемент 1», «Элемент 2», чтобы зрители могли видеть поток элементов
allkenang

3

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

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>


2

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>


1
Для меня это лучшее решение.
Patee Gutee,

1

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

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

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


Я предпочитаю подключаемый модуль колонки jQuery, на мой взгляд, у него была лучшая функциональность для того, что я делал (можно было сортировать по алфавиту, по убыванию или по возрастанию, количество столбцов, ширину столбцов и т. Колонка jQuery - WelcomeToTheInter.Net
Брандито

@Brandito - ну, код Columnizer наверняка имеет больше возможностей, так как это почти 1000 строк кода, по сравнению с моим, который составляет около 120 строк .. но выполняет свою работу хорошо
vsync

да, но моя проблема заключалась в том, чтобы список оставался одним списком, что более полезно / необходимо, зависит от варианта использования.
Brandito

0

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

0

Способ, ориентированный на мобильные устройства, - использовать столбцы 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>


0

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

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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.