Как убрать маркеры в списке?
Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору ul или li , как показано в примере 1.
Пример 1. Список без маркеров
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора ul в данном примере добавлено свойство padding-left с нулевым значением.
См. также
- list-style-type
- padding-left
Как убрать маркеры в маркированном списке?
Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.
Пример 1. Список без маркеров
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Оформление списков в CSS
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные. По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type, в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
Удаление маркеров из списка HTML: способы в CSS
Руководство по устранению проблем с исчезающими маркерами
Рассмотрим типичные проблемы, когда маркеры отказываются исчезнуть:
Конфликт специфичности
Селекторы с большей специфичностью имеют приоритет над менее специфичными. Допустим, селектор по идентификатору:
Скопировать код
#myUL < list-style: none; /* Маркерам здесь не место. */ >Проверьте изменения в различных браузерах — Chrome, Safari и других, чтобы убедиться, что маркеры ушли везде.
Неприменяемый ‘none’
Если маркеры всё ещё видны после list-style: none; , попробуйте использовать явное list-style-type: none; .
Скопировать код
Инлайн стили—это последняя мера, когда нужно перебить упрямые стили.
Скопировать код
Проверьте, чтобы внешние стили загружались после инлайновых, для избежания конфликтов в CSS.
Визуализация
Представьте модный показ (����️), где каждый li — это модель, а маркер — неуместный аксессуар.
Скопировать код
И в результате преобразуется:
Скопировать код
До: �� •, �� •, �� • После: ��, ��, ��Удалив маркеры, мы даем возможность контенту выделиться без отвлекающих факторов.
Список действий по отладке, когда маркеры не убираются
Если маркеры по-прежнему остаются на месте, проверьте следующие аспекты:
Используете ли вы правильные селекторы?
-
, а не к дочерним элементам
.
Присутствует ли конфликт стилей?
Ищите стили с большей специфичностью, которые могут перебить list-style: none; .
Используете ли вы CSS-фреймворки?
Фреймворки, например Bootstrap, могут иметь свои стили для списков. Поищите решения, направленные на работу с вашим фреймворком.
Причина ли проблемы стандартные стили браузера?
User-agent стили могут мешать. Используйте CSS-reset или normalize.css.
Предотвращение проблем, чтобы маркеры не появились снова
Чтобы маркеры не вернулись, учитесь на следующих ошибках:
Опечатки в CSS
Ошибки в коде, например, пропущенная запятая, могут сделать ваши стили непригодными. Проверьте код.
Нежелательное наследование
Свойство list-style может быть унаследовано. Будьте внимательны к родительским элементам, которые могут перебить ваши стили.
Внешние стили не загружаются
Проверьте, что URL ваших стилей верен и стили загружаются.
Кеширование
Браузеры могут использовать закешированные данные. Попробуйте обновить страницу с очисткой кеша (Ctrl+F5).
Полезные материалы
- Свойство CSS list-style-type — Подробное руководство по использованию свойства list-style-type.
- list-style – CSS: Каскадные таблицы стилей | MDN — Исчерпывающее руководство по свойству list-style от Mozilla.
- html – Может ли нумерованный список выглядеть как 1.1, 1.2, 1.3 вместо 1, 2, 3 с помощью CSS? – Stack Overflow — Интересное обсуждение о настройке пользовательской нумерации в списках с помощью CSS.
- list-style | CSS-Tricks — Сборник трюков для работы со списками.
- Свойство CSS list-style — Обучение по работе со свойством CSS list-style.