Удаление маркеров из списка HTML: способы в CSS

Быстрый ответ

Чтобы убрать маркеры, определите для свойства list-style значение none в вашем списке <ul>. Вот пример:

ul.no-bullets {
  list-style: none;
}

Затем примените класс .no-bullets к вашему списку <ul>:

<ul class="no-bullets">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ul>

Теперь маркеры исчезли!

Руководство по устранению проблем с исчезающими маркерами

Рассмотрим типичные проблемы, когда маркеры отказываются исчезнуть:

Конфликт специфичности

Селекторы с большей специфичностью имеют приоритет над менее специфичными. Допустим, селектор по идентификатору:

#myUL {
  list-style: none; /* Маркерам здесь не место. */
}

Проверьте изменения в различных браузерах — Chrome, Safari и других, чтобы убедиться, что маркеры ушли везде.

Подробнее об этом расскажет наш спикер на видео

Неприменяемый 'none'

Если маркеры всё ещё видны после list-style: none;, попробуйте использовать явное list-style-type: none;.

ul {
  list-style-type: none; /* Прощай, маркеры! */
}

Инлайн стили—это последняя мера, когда нужно перебить упрямые стили.

<ul style="list-style: none;">
  <!-- Где маркеры? Ааа, их нет! -->
</ul>

Проверьте, чтобы внешние стили загружались после инлайновых, для избежания конфликтов в CSS.

Визуализация

Представьте модный показ (👠🕶️), где каждый li — это модель, а маркер — неуместный аксессуар.

<ul style="list-style-type: none;">
    <li>👗 – Без точек!</li>
    <li>👔 – Непринужденно и стильно!</li>
    <li>👖 – Весь акцент на фасоне!</li>
</ul>

И в результате преобразуется:

До: 👟 •, 👕 •, 👓 •
После:  👟, 👕, 👓

Удалив маркеры, мы даем возможность контенту выделиться без отвлекающих факторов.

Список действий по отладке, когда маркеры не убираются

Если маркеры по-прежнему остаются на месте, проверьте следующие аспекты:

Используете ли вы правильные селекторы?

Убедитесь, что CSS-правило применено в родителя <ul>, а не к дочерним элементам <li>.

Присутствует ли конфликт стилей?

Ищите стили с большей специфичностью, которые могут перебить list-style: none;.

Используете ли вы CSS-фреймворки?

Фреймворки, например Bootstrap, могут иметь свои стили для списков. Поищите решения, направленные на работу с вашим фреймворком.

Причина ли проблемы стандартные стили браузера?

User-agent стили могут мешать. Используйте CSS-reset или normalize.css.

Предотвращение проблем, чтобы маркеры не появились снова

Чтобы маркеры не вернулись, учитесь на следующих ошибках:

Опечатки в CSS

Ошибки в коде, например, пропущенная запятая, могут сделать ваши стили непригодными. Проверьте код.

Нежелательное наследование

Свойство list-style может быть унаследовано. Будьте внимательны к родительским элементам, которые могут перебить ваши стили.

Внешние стили не загружаются

Проверьте, что URL ваших стилей верен и стили загружаются.

Кеширование

Браузеры могут использовать закешированные данные. Попробуйте обновить страницу с очисткой кеша (Ctrl+F5).

Полезные материалы

1. Свойство CSS list-style-type — Подробное руководство по использованию свойства list-style-type.
2. list-style – CSS: Каскадные таблицы стилей | MDN — Исчерпывающее руководство по свойству list-style от Mozilla.
3. html – Может ли нумерованный список выглядеть как 1.1, 1.2, 1.3 вместо 1, 2, 3 с помощью CSS? – Stack Overflow — Интересное обсуждение о настройке пользовательской нумерации в списках с помощью CSS.
4. list-style | CSS-Tricks — Сборник трюков для работы со списками.
5. Свойство CSS list-style — Обучение по работе со свойством CSS list-style.