1

Вывести список с одинаковым заполнением в колонке.
Почему в последней (4) колонке только один li?
Нужно чтобы равномерно распределялся контент по всем колонкам.

ul {
    list-style: none;
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
    column-fill: balance;
}
<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>10</li>
</ul>

http://jsfiddle.net/HP85j/2353/

2
  • 5
    Давайте немного забудем про css и логически подумаем как равномерно разделить 10 на 4
    – user212578
    21 дек 2017 в 10:19
  • Потому что заполнение идет не по горизонтали, а по вертикали. Замените 1..1 на 1,2,3...10 и уведите.
    – Kniha m
    21 дек 2017 в 13:47

1 ответ 1

2

С использованием li, незабываем убирать пустые текстовые узлы:

   ul {
  margin-left: 0;
  padding-left: 0;
  font-size: 0;
}

li {
  list-style-type: none;
  display: inline-block;
  width: 25%;
  font-size: 16px;
}
<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>10</li>
</ul>

1
  • вот заполнение нужно такое же, а порядок по вертикали (в первой колонке 1, 2, 3; во второй 4, 5, 6, в третьей 7, 8; в четвертой 9, 10) и одним потоком (один ul) 25 дек 2017 в 10:24

Ваш ответ

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

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