ozoro, есть свойство columns, которое позволяет выводить элементы в столбики.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.column-list {
padding: 0 10px;
border: 1px solid #000;
list-style-position: inside;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.column-list li ul, .column-list li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
</style>
</head>
<body>
<ul class="column-list">
<li>Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
<li>Пункт #7.6</li>
<li>Пункт #7.7</li>
<li>Пункт #7.8</li>
<li>Пункт #7.9</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #17</li>
<li>Пункт #18</li>
<li>Пункт #19</li>
<li>Пункт #20</li>
<li>Пункт #21</li>
<li>Пункт #22</li>
<li>Пункт #23</li>
<li>Пункт #24</li>
<li>Пункт #25</li>
<li>Пункт #26</li>
<li>Пункт #27</li>
<li>Пункт #28</li>
<li>Пункт #29</li>
<li>Пункт #30</li>
<li>Пункт #31</li>
<li>Пункт #32</li>
<li>Пункт #33</li>
<li>Пункт #34</li>
<li>Пункт #35</li>
<li>Пункт #37</li>
<li>Пункт #38</li>
</ul>
</body>
</html>
|
Malleys,
Благодарю, но это решение не кроссбраузерное. |
Цитата:
Вам нужно было добавить вручную префиксы, если вы не используете инструменты сборки, которые пропустят ваш код через, например, autoprefixer, чтобы поддерживать и более старые браузеры. Если вам нужна поддержка более старых Safari (до 9 версии исключительно), Chrome (до 49 версии), Firefox (до 51 версии), то добавьте также свойства с префиксами -moz-column-count и -webkit-column-count. Добавил в код выше. |
| Часовой пояс GMT +3, время: 17:08. |