Как убрать маркеры (точки) у списка ul на CSS?
У маркированного списка <ul> слева стоят точки и есть лишний отступ — хочу чистый список без буллетов, например для меню или футера. Как убрать маркеры и сдвинуть список к краю?
2 ответа
Маркеры убираются свойством list-style, а лишний отступ слева — обнулением padding:
ul.clean {
list-style: none; /* убрать точки/цифры */
margin: 0;
padding: 0; /* убрать отступ, который даёт браузер */
}
<ul class="clean">
<li>Пункт один</li>
<li>Пункт два</li>
</ul>
Важный момент: одного list-style: none часто недостаточно. Список всё равно остаётся сдвинутым вправо, потому что браузер по умолчанию задаёт <ul> левый padding (примерно 40px) — раньше там жили маркеры. Поэтому добавляют padding: 0 (или padding-left: 0). Это самая частая жалоба «маркеры убрал, а список всё равно с отступом».
Если нужно убрать маркеры глобально для всех списков (например, в навигации сайта), задайте это на нужном контейнере, а не на каждом <ul>:
nav ul { list-style: none; padding: 0; margin: 0; }
Кстати, list-style управляет не только наличием, но и видом маркера: list-style-type: square (квадрат), circle (пустой кружок), а list-style-position: inside переносит маркер внутрь текстового блока. Но для «чистого» списка нужен именно none + сброс отступа.
Замечание про доступность: убирая маркеры у <ul>, вы убираете визуальный признак списка, но семантика остаётся — это по-прежнему список для скринридеров, и это хорошо для меню. Не заменяйте <ul> на набор <div> только ради внешнего вида: правильнее оставить список и просто снять list-style. Семантика навигации (<nav><ul>) полезна и для SEO, и для доступности.