0

Как расположить элементы списка в два столбика? По пять элементов в одном столбике. Как это можно реализовать?

.wrap{
  width: 400px;
  border: 1px solid;
}
<div class="wrap">
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
    <li>Шесть</li>
    <li>Семь</li>
    <li>Восемь</li>
    <li>Девять</li>
    <li>Десять</li>
  </ul>
</div>

3 ответа 3

1

.wrap{
  width: 400px;
  border: 1px solid;
}
ul{
  column-count: 2;
}
<div class="wrap">
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
    <li>Шесть</li>
    <li>Семь</li>
    <li>Восемь</li>
    <li>Девять</li>
    <li>Десять</li>
  </ul>
</div>

4
  • caniuse.com/#feat=multicolumn
    – user298256
    4 сен 2019 в 14:25
  • @Vearo нормальная поддержка
    – fanfer
    4 сен 2019 в 14:30
  • Хорошо, пользуйтесь на здоровье)
    – user298256
    4 сен 2019 в 14:31
  • @Vearo так и делаю
    – fanfer
    4 сен 2019 в 14:32
1

.wrap{
  width: 400px;
  border: 1px solid;
}

ul {
  display:flex;
  flex-wrap: wrap;
}

li {
  flex-basis: 50%;
}
<div class="wrap">
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
    <li>Шесть</li>
    <li>Семь</li>
    <li>Восемь</li>
    <li>Девять</li>
    <li>Десять</li>
  </ul>
</div>

0

.wrap{
  display: flex;
  align-items: flex-start;
}
ul{
  width: 400px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid;
  margin-right: 10px;
}
ul.flex-direction-column{
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 120px;
}

li{
  width: 50%;
  display: block;
}
<div class="wrap">
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
    <li>Шесть</li>
    <li>Семь</li>
    <li>Восемь</li>
    <li>Девять</li>
    <li>Десять</li>
    <li>Одинадцать</li>
  </ul>
  <ul class="flex-direction-column">
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
    <li>Четыре</li>
    <li>Пять</li>
    <li>Шесть</li>
    <li>Семь</li>
    <li>Восемь</li>
    <li>Девять</li>
    <li>Десять</li>
    <li>Одинадцать</li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.