Форум

Malleys · #11 (**permalink**) 23.10.2019, 22:32

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>

ozoro · #12 (**permalink**) 24.10.2019, 16:52

Malleys,
Благодарю, но это решение не кроссбраузерное.

Malleys · #13 (**permalink**) 25.10.2019, 17:37

Сообщение от ozoro

это решение не кроссбраузерное.

Кроссбраузерное свойство column-count поддерживается во всех последних версиях браузеров. https://caniuse.com/#feat=mdn-css_pr...s_column-count

Вам нужно было добавить вручную префиксы, если вы не используете инструменты сборки, которые пропустят ваш код через, например, autoprefixer, чтобы поддерживать и более старые браузеры.

Если вам нужна поддержка более старых Safari (до 9 версии исключительно), Chrome (до 49 версии), Firefox (до 51 версии), то добавьте также свойства с префиксами -moz-column-count и -webkit-column-count. Добавил в код выше.

Форум

Справочник

Discord чат

Курсы javascript