Моя веб-сторінка має «худий» список: наприклад, список зі 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) є безліч химерностей і проблем з css column-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>

Це два ключових рядки, які дадуть вам ваш макет 2 стовпців

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>