Как сделать расположение списка элементов ёлочкой?

Ссылка скопирована
CSS HTML PHP
13 февраля 2026 1 ответ

Всем привет, верстаю тут лендинг и возник вопрос, как сверстать такой список?

Как сделать расположение списка элементов ёлочкой?

Или только как-то на группы делить их что-ли...

Дополнительно:

Автоматического расположения так не добиться. проще всего разбивать на группы с центрированием.
В частном случае можно поизвращаться.

snippet

  • Спасибо за ответ.

Пример сетки, оформлять не стал:
snippet

  • Спасибо.

В общем, пришёл к такому решению.

Как сделать расположение списка элементов ёлочкой?

Как сделать расположение списка элементов ёлочкой?

  • Уберите айдишники, если они вам вот прямо очень-очень не нужны (а они здесь не нужны), замените на классы.
    Не используйте классы city_row_1/city_row_2. Такие имена ни о чем не говорят. Назовите их city_row_default_size/city_row_big_size
    Отступы через отрицательные марджины тоже не актуальны. Используйте flex и gap. Это избавит вас от дочерних селекторов и как следствие от излишней специфичности.
  • Сергей delphinpro, Да, я изначально не подумал об этом. Надо чуть переделать
    Когда я делал, я думал, что у третьей строки размер шрифта ещё меньше, а он совпадает со второй строкой
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Сергей Миронов Ответ

Для того чтобы расположить список элементов в виде ёлочки, можно воспользоваться рекурсивной функцией, которая будет строить необходимую структуру. Вот пример решения на языке PHP:

function printTree($level) {
    for ($i = 1; $i <= $level; $i++) {
        echo str_repeat(" ", $level - $i);
        echo str_repeat("*", $i * 2 - 1);
        echo &quot;<br>";
    }
}
 
printTree(5);

function printTree($level) { for ($i = 1; $i &lt;= $level; $i++) { echo str_repeat(&quot;&nbsp;&quot;, $level - $i); echo str_repeat(&quot;*&quot;, $i * 2 - 1); echo &quot;<br>"; } } printTree(5);

Этот код создаст ёлочку из звездочек, где каждый уровень будет иметь увеличивающееся количество звездочек. Вы можете изменить символы и параметры функции в зависимости от ваших потребностей.

Также возможно использовать CSS для стилизации списка в виде ёлочки. Например, можно использовать псевдоэлементы ::before и ::after для создания дополнительных элементов, которые будут отображаться слева и справа от каждого элемента списка.

Ниже приведен пример CSS, который можно применить к списку для создания ёлочки:

ul {
    list-style: none;
    padding: 0;
}
 
ul li {
    position: relative;
    padding-left: 20px;
}
 
ul li::before {
    content: "•";
    position: absolute;
    left: 0;
}
 
ul li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    border-left: 1px solid #000;
    height: 20px;
}

ul { list-style: none; padding: 0; } ul li { position: relative; padding-left: 20px; } ul li::before { content: "•"; position: absolute; left: 0; } ul li::after { content: ""; position: absolute; left: 0; top: 10px; border-left: 1px solid #000; height: 20px; }

Этот код создаст стилизованный список в виде ёлочки. Вы можете настроить стили под свои потребности, изменяя цвета, отступы и другие параметры.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов