CSS список ul в несколько колонок (с небольшим нюансом)

Рейтинг: 2Ответов: 1Опубликовано: 17.07.2023

Как корректно разбить такой список на 2 колонки, чтобы у Пункта все Подпункты оставались в одной колонке. Может здесь не CSS нужен, а правильный HTML?

Здесь вопрос с div-ами был решён column-count и перенос блоков. Нюанс с column-count

<ul style="list-style-position: outside;-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6<br> Подпункт 1<br> Подпункт 2<br> Подпункт 3<br> Подпункт 4<br> Подпункт 5</li>
  <li>Пункт 7</li>
  <li>Пункт 8</li>
  <li>Пункт 9</li>
  <li>Пункт 10</li>
</ul>

css html ul li
Источник: Stack Overflow на русском

Ответы

▲ 0

Для создания подпунктов внутри <li> оберните подпункты в <ul>. Чтобы перенос работал целиком на пункт со всеми его подпунктами используйте display: flex

.roster {
  list-style-position: outside;
  display: flex;
  flex-wrap: wrap;
  height: 200px;
  flex-direction: column;
}
<ul class="roster">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
  <li>Пункт 5</li>
  <li>Пункт 6
    <ul>
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
      <li>Подпункт 3</li>
      <li>Подпункт 4</li>
      <li>Подпункт 5</li>
    </ul></li>
  <li>Пункт 7</li>
  <li>Пункт 8</li>
  <li>Пункт 9</li>
  <li>Пункт 10</li>
</ul>