Как убрать маркеры в списке?
Чтобы скрыть отображение маркеров в списке применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору ul или li , как показано в примере 1.
Пример 1. Список без маркеров
Результат данного примера показан на рис. 1.
Рис. 1. Список без маркеров
Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора ul в данном примере добавлено свойство padding-left с нулевым значением.
См. также
- list-style-type
- padding-left
Как в HTML создать маркированный список без маркеров (убрать точки у li)
В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML . В том числе и с помощь list style none .
Пример HTML
-
) или упорядоченного списка (
) уберет любые маркеры или номера:
Пример HTML с CSS
Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML , которые можно использовать для удаления маркеров.
-
). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:
Но лучше создать класс list style none CSS , который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS :
.nobull
В приведенном выше коде CSS создается новый класс «nobull» . Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:
Вывод примера
Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none .
КК Константин Кондрусин автор статьи « How to create a bullet list with no bullets in HTML »
Как убрать маркеры в маркированном списке?
Для этой цели применяется стилевое свойство 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как растянуть фон на всю ширину окна?
Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как открыть ссылку в новом окне?
Как убрать точки в списке html
-
или
существует CSS свойство list-style-type . Оно может принимать разные значения, например circle, square или decimal. Для того чтобы убрать маркер — нужно выставить значение none.
Рассмотрим пример ниже:
Есть маркер Есть маркер Есть маркер Маркер убран Маркер убран Маркер убран
ol list-style-type: none; > ul list-style-type: "✔"; >
Результат: