Как убрать маркеры в маркированном списке?
Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.
Пример 1. Список без маркеров
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.
Как сделать список без точек в HTML
Список — часто повторяющийся на странице элемент, он может принимать разные формы, использоваться для перечисления похожих объектов, быть списком услуг, адресов или карточек товаров в каталоге.
При создании неупорядоченного списка <ul> каждый его элемент автоматически будет обозначен точкой или так называемым буллитом. Это слово происходит от английского bullet — типографский знак для выделения элементов списка.
Но если вы верстаете, например, карточки товаров, перечисление услуг или список преимуществ в виде сетки с иллюстрациями, то явно будут мешать лишние символы.
Как сделать список без буллитов, если они не нужны?
Отключение буллитов у списка в теге <style>
На первый взгляд самый простой способ — сразу в разметке убрать буллиты. Для этого нужно стилизовать тег <ul> CSS-свойством list-style-type :
Также с помощью list-style-type: none; отключается нумерация в упорядоченном списке <ol> .
⚠ Несмотря на то, что стиль, прописанный прямо в файле HTML, точно сработает, лучше выносить стили в отдельный файл CSS. Иногда встречается стилизация списка по тегу, но это тоже не самый лучший вариант.
Это тоже список
Если на сайте изменится дизайн или наполнение, стилизация по тегу усложнит внесение корректировок. Поэтому практичнее прописать все стили в файле CSS. Тогда при переделке сайта достаточно убрать или заменить определенное свойство и при этом не менять ничего в вёрстке.
Дополнительное чтение:
Отключение буллитов в CSS
Самый актуальный способ убрать буллиты из списка — использовать свойство list-style-type в файле со стилями. Чтобы задать свойство, присвойте списку <ul> класс, например, nobullet .
Тогда стилизация этого класса будет выглядеть так:
В этом случае все дочерние элементы <li> списков <ul> с классом nobullet примут значение родительского, и буллиты исчезнут.
�� CSS-свойство list-style-type отвечает не только за удаление буллитов, также у него есть другие полезные значения, которые позволят изменять вид стандартного буллита.
Для неупорядоченного списка <ul> можно применить:
- disc — авто, закрашенный круг;
- circle — не закрашенный круг;
- square — квадрат.
Источник
Если на странице несколько списков, в одном нужны буллиты, а в других нет, присвойте им разные классы и сверстайте каждый список в нужном стиле.
Отключение буллита у определенного элемента списка
Если необходимо убрать буллит только у одного элемента списка, а у остальных оставить, то класс nobullet присвойте нужному <li> .
У второго элемента отключен буллит
Как заменить буллиты на изображения
В некоторых ситуациях вместо буллитов необходимо разместить тематические иконки или картинки. Например, в списках преимуществ на лендингах, описании услуг или перечне продуктов.
Для решения такой задачи применяется CSS-свойство list-style-image . Подробнее о нём в спецификации.
Но не стоит увлекаться и добавлять вместо буллитов тяжелые красочные картинки, это может существенно повлиять на скорость загрузки сайта, и пользователь не скажет вам «спасибо».
Как убрать маркеры в списке?
Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору ul или li , как показано в примере 1.
Пример 1. Список без маркеров
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора ul в данном примере добавлено свойство padding-left с нулевым значением.
Как убрать маркеры списка css?
Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:
То CSS код будет выглядеть так:
Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.
Это свойство позволит нам убрать маркер, но отступ слева останется.
Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;
Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»
Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера. Подробнее о том как это сделать написано в этой статье: «Как сделать красивый маркированный список HTML?»
Надеюсь что эта статья поможет вам быстрее решить проблему с маркерами и у вас ещё останется время чтобы посмотреть вот это интересное видео про самые необычные здания: