Форум

javascript_pupil · #1 (**permalink**) 28.02.2023, 17:22

Есть некий список. Чтобы соответствовать логической структуре документа для его форматирования используется соответствующий 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-ю строчку в зависимости от длины списка.

рони · #2 (**permalink**) 28.02.2023, 17:37

javascript_pupil,

<!DOCTYPE html>
<html>

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

        .arch {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
        }

        .arch li {
            margin-left: 16px;
        }
    </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</a></li>
            <li><a href="">8</a></li>
            <li><a href="">7</a></li>
            <li><a href="">6</a></li>
            <li><a href="">5</a></li>
            <li><a href="">4</a></li>
            <li><a href="">3</a></li>
            <li><a href="">2</a></li>
            <li><a href="">1</a></li>
        </ul>
    </div>
</body>

</html>

javascript_pupil · #3 (**permalink**) 28.02.2023, 19:29

Очень круто! Спасибо! Я пробовал с "flex", но видимо что-то не дописал. Самое главное, что сохраняется логическая структура документа, а именно: список. Некоторые на это плюют, но мне кажется это важным т.к. "чем дальше в лес", тем больше влияние это будет оказывать на ранжирование, ведь хоть и смотрит на страницу человек, выдачу ранжируют алгоритмы.

Еще один вопрос: возможно ли к этой замечательной конструкции каким-то образом "прикрутить" overflow? Чтобы, например, 3-я или 4-я строчка плавно или не плавно становилась невидимой. Строчек этих в реальности может быть очень много. Открыть её (и все остальные), при необходимости, можно будет с помощью javascript типа:

*.style.display = "block"

если кто-то захочет ~~"огласите весь список пжалста" (с)~~ просмотреть весь список.

Непонятно, как это "overflow" привязывать к строкам?

рони · #4 (**permalink**) 28.02.2023, 22:40

javascript_pupil,
ищите что-то подобное https://javascript.ru/forum/misc/849...tml#post550561

Форум

Справочник

Discord чат

Курсы javascript