В некоторых случаях может понадобиться создать маркированный список без маркеров. Ниже описано несколько способов реализации этого с помощью HTML . В том числе и с помощь list style none .
Пример HTML
Добавление стиля «list-style: none» в тег неупорядоченного (
-
) или упорядоченного списка (
-
) уберет любые маркеры или номера:
Пример HTML с CSS
Приведенный выше пример работает почти в любой ситуации. Но лучше размещать CSS во внешнем файле стилей. Ниже приведены CSS и HTML , которые можно использовать для удаления маркеров.
Применение этого кода CSS удаляет маркеры из всех неупорядоченных списков (
-
). Это может понадобиться, если вы не намерены ставить маркеры или хотите использовать вместо них изображения:
Но лучше создать класс list style none CSS , который можно будет использовать в том случае, когда не нужно показывать маркеры. Код CSS :
В приведенном выше коде CSS создается новый класс «nobull» . Его можно задействовать в тех случаях, когда не нужно показывать маркер. Например:
Подсказка : Этот класс можно применить для любого элемента списка (
), чтобы скрыть маркер напротив определенных элементов, но оставить другие маркеры.
Вывод примера
Ниже показано, как выводится на экран неупорядоченный список без маркеров с помощью list style type none .
Данная публикация представляет собой перевод статьи « How to create a bullet list with no bullets in HTML » , подготовленной дружной командой проекта Интернет-технологии.ру
Тип маркера
Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка 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 .
Любое из свойств, рассмотренных в данной теме можно установить как самому списку, так и отдельному элементу списка.
Коприрование материалов сайта возможно только с согласия администрации
За управление маркерами есть специальное свойство CSS list-style-type .
Синтаксис свойства CSS list-style-type
- disc – маркер в виде закрашенного кружка
- circle – маркер в виде прозрачного кружка
- square – маркер в виде закрашенного квадрата
- none – отсутствие маркера