Распределение неупорядоченного списка (UL) - сначала устанавливается по вертикали, затем по горизонтали - PullRequest
Новая
       10

Распределение неупорядоченного списка (UL) - сначала устанавливается по вертикали, затем по горизонтали

0 голосов
/ 14 сентября 2018

Используя следующий HTML 

<ul>
<li>1.List</li>
<li>2.List</li>
<li>3.List</li>
<li>4.List</li>
<li>5.List</li>
<li>6.List</li>
<li>7.List</li>
<li>8.List</li>
<li>9.List</li>
<li>10.List</li>
<li>11.List</li>
<li>12.List</li>
</ul>

Пожалуйста, помогите мне создать этот тип листинга только с использованием CSS. Список является динамическим, поэтому я не могу добавлять другие классы между ними.

Я пытался создать https://jsfiddle.net/u39m0hk8/2/ Мне нужен лучший CSS для создания дистрибутива.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Есть два очевидных решения, во-первых, использовать CSS-столбцы: 

ul {
  /* Defines the number of columns the 
     content should occupy: */
  column-count: 3
}

li {
  /* Irrelevant, but I used generated content
     to display the list-item numbers: */
  list-style-position: inside;
  list-style-type: decimal;
  color: #fff;
  background-color: red;
  margin: 4px;
}
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

И второе - использовать CSS Grid: 

ul {
  /* using CSS Grid layout: */
  display: grid;

  /* defining three columns ('3') each column being one
     equal fraction ('1fr') of the available space: */
  grid-template-columns: repeat(3, 1fr);

  /* setting a gap between each of the list-items: */
  grid-gap: 4px;
}

li {
  list-style-position: inside;
  list-style-type: decimal;
  color: #fff;
  background-color: red;
}
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Ссылки:

0 голосов
/ 14 сентября 2018

Это легко сделать с помощью column-count

ul {
  column-count: 3;
  list-style-type: none;
  padding; 0;
  margin: 0;
  column-gap: 2px;
}
li {
  background-color: #f00;
  margin-bottom: 2px;
  color: white;
  text-indent: 10px;
  padding: 3px 0;
}
<ul>
  <li>1.List</li>
  <li>2.List</li>
  <li>3.List</li>
  <li>4.List</li>
  <li>5.List</li>
  <li>6.List</li>
  <li>7.List</li>
  <li>8.List</li>
  <li>9.List</li>
  <li>10.List</li>
  <li>11.List</li>
  <li>12.List</li>
</ul>
...