Как в 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 »
Списки в CSS
У каждого элемента списка есть маркер. Это значёк перед текстом. В 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 — значение принимается от родительского элемента. Для обоих списков
Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:
7
8
9
10
11
12
13
14
#nl1 < list-style-type: circle; >#nl2
Как убрать точки у чисел списка?
В нумерованном списке номер каждого пункта выводится с точкой. При этом как-то изменить вид числа, к примеру, убрать точку или поставить скобку, напрямую нельзя. Поэтому вообще убираем исходную нумерацию и выводим свою с помощью псевдоэлемента ::before и свойства content. Чтобы нумерация работала и увеличивалась с каждым пунктом, нужно добавить свойство counter-reset с произвольным именем счётчика для его инициализации и counter-increment для приращения счётчика. Необходимый набор свойств для создания собственной нумерации списка приведён ниже.
Поскольку мы сами выводим число, то можем легко его стилизовать, изменив цвет, сделав жирным, курсивным и др. В примере 1 показан вывод и оформление нумерации.
Пример 1. Собственная нумерация
Результат данного примера показан на рис. 1.
Рис. 1. Вид собственной нумерации списка
См. также
- counter-increment
- counter-reset
- Анимация псевдоэлементов
Как убрать точки от
Как можно убрать это (в неупорядоченном списке
):
Отслеживать
задан 12 апр 2018 в 16:01
Иван Репин Иван Репин
351 1 1 золотой знак 9 9 серебряных знаков 21 21 бронзовый знак
12 апр 2018 в 16:05
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Для этой цели применяется стилевое свойство list-style-type со значением none :
li < list-style-type: none; /* Убираем маркеры */ >ul < margin-left: 0; /* Отступ слева в браузере IE и Opera */ padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ >Отслеживать
4,572 3 3 золотых знака 17 17 серебряных знаков 53 53 бронзовых знака
ответ дан 12 апр 2018 в 16:04
765 1 1 золотой знак 10 10 серебряных знаков 28 28 бронзовых знаков
Можно сделать изящней то же самое:
Это будет строчно-блочное отображение, маркеры уйдут. Можно просто inline применить.
А можно и блоком оставить список и убрать маркеры: