Css li убрать маркер

Css li убрать маркер

За управление маркерами есть специальное свойство CSS list-style-type .

Синтаксис свойства CSS list-style-type

  • disc – маркер в виде закрашенного кружка
  • circle – маркер в виде прозрачного кружка
  • square – маркер в виде закрашенного квадрата
  • none – отсутствие маркера

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Скрыть отображение маркеров в списке.

Решение

Для этой цели применяется стилевое свойство 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. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

Для маркированного списка:

list-style-type: disc – в виде диска (по умолчанию)

list-style-type: circle – в виде круга

list-style-type: square – в виде квадрата

Для нумерованного списка

list-style-type: decimal – арабские цифры (по умолчанию)

list-style-type: decimal-leading-zero – арабские цифры c 0 впереди для чисел 1-9

list-style-type: upper-roman – заглавные римские цифры

list-style-type: lower-roman – строчные римские цифры

list-style-type: upper-latin – заглавные латинские буквы

Читайте также:  Вал вращается со скоростью

list-style-type: upper-alpha – то же, что и upper-latin

list-style-type: lower-latin – строчные латинские буквы

list-style-type: lower-alpha – то же, что и lower-latin

list-style-type: lower-greek – строчные греческие буквы

list-style-type: armenian – армянские числа

list-style-type: georgean – грузинские числа

list-style-type: none – позволяет убрать маркеры списка. Для обоих списков

list-style-type: inherit – значение принимается от родительского элемента. Для обоих списков

Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

Попробуйте установить другие типы маркера.

Как убрать маркеры списка в CSS

Значение none позволяет убрать маркеры списка. Пример:

Позиция маркера

Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

  • В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
  • В этом пункте списка маркер входит в элемент списка и является частью текста

Позицию маркера устанавливает свойство list-style-position . Оно принимает значения:

list-style-position: outside – за пределами элемента (по умолчанию)

list-style-position: inside – внутри элемента

Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :

Маркер в виде изображения

В качестве маркера может быть использовано изображение. При этом, список может выглядеть так:

Для использлвания изображения существует свойство list-style-image . Значением свойства является путь к файлу изображения.

Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите "Сохранить изображение как".

Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

Читайте также:  Как найти почту по электронному адресу

Краткая запись

Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style . В нём перечисляются через пробел сначала тип маркера, затем положение маркера, затем картинка. При этом, все свойства указывать не обязательно. Указываются только те свойства, которые нужны. Если изображение не установлено, то маркер зависит от того, маркерованный список или нумерованный, и от типа маркера.

Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style .

Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.

Коприрование материалов сайта возможно только с согласия администрации

Ссылка на основную публикацию
Adblock detector