Показать сообщение отдельно
  #1 (permalink)  
Старый 28.02.2023, 17:22
Профессор
Отправить личное сообщение для javascript_pupil Посмотреть профиль Найти все сообщения от javascript_pupil
 
Регистрация: 05.07.2009
Сообщений: 222

Возможно ли переносить элементы LI на новую строку при выходе за пределы блока?
Есть некий список. Чтобы соответствовать логической структуре документа для его форматирования используется соответствующий HTML тег - UL с элементами списка LI. Традиционно списки располагаются сверху вниз, где каждый элемент LI находится на новой строке. В моем конкретном случае это не подходит, поэтому они, с помощью CSS выстроены в горизонтальную линию (см. код).

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

<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
width: 20%;
border: 1px solid #ccc;
}

.arch {
display: inline-block;
}
.arch li {
display: inline;
margin-left: 10px;
}

</style>
<title>Example</title>
</head><body>

<div class="test1">
<p class="arch">List:</p>
<ul class="arch">
<li><a href="/21/">21</a></li><li><a href="/20/">20</a></li><li><a href="/19/">19</a></li><li><a href="/18/">18</a></li><li><a href="/17/">17</a></li><li><a href="/16/">16</a></li><li><a href="/15/">15</a></li><li><a href="/14/">14</a></li><li><a href="/13/">13</a></li><li><a href="/12/">12</a></li><li><a href="/11/">11</a></li><li><a href="/10/">10</a></li><li><a href="/9/">9</a></li><li><a href="/8/">8</a></li><li><a href="/7/">7</a></li><li><a href="/6/">6</a></li><li><a href="/5/">5</a></li><li><a href="/4/">4</a></li><li><a href="/3/">3</a></li><li><a href="/2/">2</a></li><li><a href="/1/">1</a></li>
</ul>

</div>
</body></html>


На картинке (для наглядности граница блока выделена рамкой) это выглядит так:



а должно выглядеть так:



Поскольку дизайн адаптивный и ширина DIV на разных устройствах разная, то и переносы строки могут быть в разных местах. Главное, чтобы они не выходили за границу DIV'а и выстраивались на 2-ю, 3-ю и 100500-ю строчку в зависимости от длины списка.
Изображения:
Тип файла: png css_list1.png (1.9 Кб, 8 просмотров)
Тип файла: png css_list2.png (1.7 Кб, 8 просмотров)

Последний раз редактировалось javascript_pupil, 28.02.2023 в 17:25.
Ответить с цитированием