Как создать ненумерованный список без маркеров?
Я создал неупорядоченный список и обнаружил, что маркеры в этом списке выглядят беспокойно. Мне необходимо удалить эти маркеры.
Возможно ли сделать список без маркеров?
5 ответ(ов)
Если вы используете Bootstrap, он предоставляет класс "unstyled", который позволяет убрать стандартные стили списков:
Убирает стандартный стиль списка и левый отступ у элементов списка (только для непосредственных потомков).
Bootstrap 2:
<ul class="unstyled">
<li>...</li>
</ul>
Ссылка на документацию: Bootstrap 2
Bootstrap 3, 4 и 5:
<ul class="list-unstyled">
<li>...</li>
</ul>
Документация на Bootstrap 3: Bootstrap 3
Документация на Bootstrap 4: Bootstrap 4
Документация на Bootstrap 5: Bootstrap 5
Чтобы убрать маркеры у списка, вам нужно использовать свойство CSS list-style: none;
. Вот пример, как это сделать:
<ul style="list-style: none;">
<li>...</li>
</ul>
В этом коде list-style: none;
отключает стандартные маркеры (точки или квадраты) для элементов списка.
Для улучшения читаемости длинных строк, которые могут занимать несколько экранных строк, можно внести небольшие уточнения в предыдущие ответы. Попробуйте следующий CSS код:
ul, li {list-style-type: none;}
li {padding-left: 2em; text-indent: -2em;}
Этот код убирает стандартные маркеры списка и добавляет отступы, что позволяет лучше воспринимать текст, особенно если он выходит за пределы одной строки.
Если у вас не получается убрать маркеры списка на уровне <ul>
, возможно, вам стоит применить стиль list-style-type: none;
на уровне <li>
:
<ul>
<li style="list-style-type: none;">Элемент 1</li>
<li style="list-style-type: none;">Элемент 2</li>
</ul>
Чтобы избежать повторения кода, вы можете создать CSS-класс:
<style>
ul.no-bullets li {
list-style-type: none;
}
</style>
<ul class="no-bullets">
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
Если это необходимо, вы можете использовать !important
:
<style>
ul.no-bullets li {
list-style-type: none !important;
}
</style>
Таким образом, указанные правила стилей будут принудительно применены.
Вы можете использовать list-style
как для <ul>
, так и для <li>
, чтобы удалить маркеры списка. Если вы хотите заменить маркеры на пользовательский символ, например, на 'дэш', это можно сделать с помощью псевдоэлемента :before
. Ниже приведен пример того, как это реализовать. Такой подход создает аккуратно отформатированный вид с отступом, который хорошо смотрится даже при переносе текста.
ul.dashed-list {
list-style: none outside none; /* Убираем стандартные маркеры списка */
}
ul.dashed-list li:before {
content: "\2014"; /* Используем длинное тире в качестве маркера */
float: left; /* Выравниваем маркер влево */
margin: 0 0 0 -27px; /* Устанавливаем отрицательный отступ для смещения маркера */
padding: 0; /* Убираем отступы */
}
ul.dashed-list li {
list-style-type: none; /* Также подтверждаем отсутствие маркера для элементов списка */
}
И HTML-код:
<ul class="dashed-list">
<li>текст</li>
<li>текст</li>
</ul>
Таким образом, вы создадите список с индивидуальными маркерами в виде дэш, что выглядит эстетично и поддерживает правильное выравнивание текста.
Получить координаты (X,Y) HTML-элемента
"Как сделать div на 100% высоты окна браузера"
Скрыть полосу прокрутки, но сохранить возможность прокрутки
Стилизация кнопки input type="file"
Изменение цвета элемента hr