Как удалить, заменить или оформить маркеры списка с помощью CSS
Иногда может понадобиться удалить маркеры/стили упорядоченных (<ol>) и неупорядоченных (<ul>) списков. Удаление маркеров списка не представляет трудности. Для этого можно использовать CSS свойство list-style или list-style-type.
Код будет иметь следующий вид:
Пример
Если хотите иметь только один список или один элемент списка без маркеров или чисел, можно применить класс, который может быть использован каждый раз для удаления маркеров.
Здесь у нас будет класс с названием «nolist» для упорядоченных списков. При необходимости он также может быть использован в будущем.
Можете также установить класс к любому элементу списка (<li>), не меняя остальные маркеры.
Пример
Как заменить маркеры списка на изображения
CSS может быть использован, чтобы превратить маркеры в квадраты или круги, но таким образом мы не имеем полного контроля над их внешним видом или положением. Замена стандартных HTML маркеров на изображения — отличный способ, чтобы сделать ваш сайт более привлекательным.
Есть два способа установления изображений для элементов списка:
- Используйте list-style-image, чтобы заменить HTML маркеры на графические изображения. В большинстве современных браузеров применение этих изображений несовместимо. А также нет полного контроля над положением маркеров.
HTML маркеры могут быть заменены на изображения с помощью «list-style-image». Но применение изображений не всегда совместимо с браузером.
Пример
- Использование фоновых изображений для маркеров будет лучшим вариантом. Давайте пошагово увидим, как применить этот метод:
- Создайте простой неупорядоченный список
- Удалите маркеры с помощью list-style-type: none none
- Удалите поля и отступы
Стандартные списки HTML имеют отступ в определенной величине. Она отличается для каждого браузера. Для этого некоторые браузеры (Mozilla, Safari) используют отступ, а другие (Internet Explorer, Opera) — поля.
Для того, чтобы удалить левый отступ из всех браузеров, установите и padding и margin в «0» для элемента <ul>, как в данном примере:
- Добавьте отступ сами
В случае, если левый отступ обязателен, рекомендуется использовать margin-left. Так как сейчас padding установлено в «0», могут быть указаны точные измерения для левого поля, и это будет совместимо со всеми браузерами.
- Добавьте фоновое изображение
Используйте CSS свойство background-image, чтобы добавить фоновое изображение для элемента <li>. Таким образом, фоновое изображение будет повторяться для фона каждого элемента списка, что не будет красиво смотреться.
- Задайте no-repeat
Чтобы фоновое изображение не повторялось в фоне элементов списка, задайте «no-repeat» для свойства background-repeat. Здесь установлено только одно изображение для каждого элемента, но требуется изменить положение.
- Измените положение фонового изображения
Используйте CSS свойство background-position для установления такого положения фонового изображения, чтобы оно соответствовало тексту.
Сейчас изображения выстроены в линию по горизонтали вместе с контентом. Но контент расположен наверху изображений.
- Переместите контент
Чтобы отдалить контент от фонового изображения, примените padding-left к элементу <li>. В данном случае используется «20px». Как и в случае вертикального выравнивания, отступ списка будет определен размером изображения.
А сейчас увидим каким будет полный пример:
Пример
Как создать горизонтальные списки
Создание горизонтальных списков не так уж трудно. Это отличный способ сделать так, чтобы списки действовали как кнопки или навигационное меню. Есть много методов, которые можно использовать для создания горизонтального списка. Главное установить display: inline указанный для элемента <li>.
Пример
Как оформить списки
Добавьте стиль к спискам с помощью свойств color и background-color:
Пример
Создайте список с полной шириной границ, используя CSS свойства border и border-bottom:
Пример
Добавьте границу к элементам вашего списка, используя CSS свойство border-left:
Пример
Чтобы иметь разные маркеры в одном списке, необходимо применить класс к к каждому элементу списка и отдельно для каждого указать list-style.
Пример
Пример со всеми видами маркеров
В этом примере увидите разные виды упорядоченных ( <ol> ) и неупорядоченных ( <ul> ) списков:
Как убрать точки в списке html
Для стилизации маркеров html-списка, созданного с помощью тегов <ul> или <ol> существует CSS свойство list-style-type. Оно может принимать разные значения, например circle, square или decimal. Для того чтобы убрать маркер — нужно выставить значение none.
Рассмотрим пример ниже:
Результат: 
I need an unordered list without any bullets
I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.
Is it possible to have a list without bullets?
16 Answers 16
You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul> ), for example:
You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
If you’re using Bootstrap, it has an "unstyled" class:
Remove the default list-style and left padding on list items (immediate children only).
Bootstrap 2:
Bootstrap 3, 4, and 5:
You need to use list-style: none;
Small refinement to the previous answers: To make longer lines more readable if they spill over to additional screen lines:
If you’re unable to make it work at the <ul> level, you might need to place the list-style-type: none; at the <li> level:
You can create a CSS class to avoid this repetition:
When necessary, use !important :
I used list-style on both the ul and the li to remove the bullets. I wanted to replace the bullets with a custom character, in this case a ‘dash’. That gives a nicely indented effect that works fine when the text wraps.
If you wanted to accomplish this with pure HTML alone, this solution will work across all major browsers:
Description Lists
Simply using the following HTML:
This orders a list vertically without bullet points. In just one line!
To completely remove the ul default style:
If you are developing an existing theme, it’s possible that the theme has a custom list style.
So if you cant’t change the list style using list-style: none; in ul or li tags, first check with !important , because maybe some other line of style is overwriting your style. If !important fixed it, you should find a more specific selector and clear out the !important .
If it’s not the case, then check the li:before . If it contains the content, then do:
Как убрать маркеры списка css?
Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:
То CSS код будет выглядеть так:
Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.
Это свойство позволит нам убрать маркер, но отступ слева останется.
Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;
Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»
Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера. Подробнее о том как это сделать написано в этой статье: «Как сделать красивый маркированный список HTML?»
Надеюсь что эта статья поможет вам быстрее решить проблему с маркерами и у вас ещё останется время чтобы посмотреть вот это интересное видео про самые необычные здания: