Убрать маркированный список css. css: как убрать точку в нумерации списка ol

Содержание:

Вид маркера
Маркированные списки в HTML
Оформление списков с помощью CSS-стилей
Таблица спецсимволов
Список с рисованными маркерами
Css оформление маркеров списка
Позиция маркера
Тип маркера
Вид маркера
Позиция маркера
Подчеркивание ссылок
Убираем маркеры по умолчанию
Убираем маркеры по умолчанию
Отступ списка
Маркер в виде изображения

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type
или универсальное list-style
(пример 1). Применяются следующие значения:

disc
— маркеры в виде закрашенного кружка;
circle
— маркеры в виде незакрашенного кружка;
square
— квадратные маркеры.

Пример 1. Изменение вида маркера

Списки

Сепульки
Сепулькарии
Сепуление

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к

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

добавляем свой собственный символ с помощью псевдоэлемента ::before
. В примере 2 в качестве такого маркера выступает треугольник.

Пример 2. Использование::before

Списки

Сепульки
Сепулькарии
Сепуление

Результат данного примера показан на рис. 2. Поскольку использование свойства list-style
со значением none
не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent
с отрицательным значением. Его задача — переместить текст левее на один символ.

Рис. 2. Произвольные маркеры в списке

Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

Рис. 3. Выбор символа в LibreOffice

Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image
. В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.

Пример 3. Использование изображения в качестве маркера

Списки

Сепульки
Сепулькарии
Сепуление

Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок.

Рис. 4. Рисунок в качестве маркера

Применение list-style-image
обладает некоторыми недостатками:

рисунок нельзя сдвинуть вверх или вниз;
в разных браузерах положение рисунка относительно текста может отличаться.

Этих недочётов можно избежать с помощью свойства background
, оно устанавливает фоновое изображение. Для каждого элемента списка

Маркированные списки в HTML

Создание списка в word

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:

А вот так выглядит в браузере:

1.1
Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2
Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type
и задали его нашему маркированному списку:

html
>

head
>

title
>
Пример маркированного списка с маркером в виде пустого круга/
title
>

/
head
>

body
>

p
>
Звезды:/
p
>

ul
type
=
«circle»
>

li
>
Сириус/
li
>

li
>
Арктур/
li
>

li
>
Поллукс/
li
>

li
>
Бетельгейзе/
li
>

li
>
Солнце/
li
>

/
ul
>

/
body
>

/
html
>

Сразу смотрим как этот код будет выглядеть в браузере:

1.3
Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Важное замечание:
сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML

HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

Ошибка будет следующая:

С маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Как поставить точку на клавиатуре посередине

Свойство изменяет типа маркера или удаляет маркер
для маркированного и нумерованного списков. Наследуется.

list-style-type
Значения:
disc	Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
armenian	Традиционная армянская нумерация.
circle	В качестве маркера выступает незакрашенный кружок.
cjk-ideographic	Идеографическая нумерация.
decimal	1, 2, 3, 4, 5, …
decimal-leading-zero	01, 02, 03, 04, 05, …
georgian	Традиционная грузинская нумерация.
hebrew	Традиционная еврейская нумерация.
hiragana	Японская нумерация: a, i, u, e, o, …
hiragana-iroha	Японская нумерация: i, ro, ha, ni, ho, …
katakana	Японская нумерация: A, I, U, E, O, …
katakana-iroha	Японская нумерация: I, RO, HA, NI, HO, …
lower-alpha	a, b, c, d, e, …
lower-greek	Строчные символы греческого алфавита.
lower-latin	a, b, c, d, e, …
lower-roman	i, ii, iii, iv, v, …
none	Маркер отсутствует.
square	В качестве маркера выступает закрашенный или незакрашенный квадрат.
upper-alpha	A, B, C, D, E, …
upper-latin	A, B, C, D, E, …
upper-roman	I, II, III, IV, V, …
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

Синтаксис

Ul {list-style-image: url(«images/romb.png»);}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

CSS дает возможность создавать маркированные и нумерованные списки, оформлять списки маркеров изображением, а также, если нужно, вообще убирать любые обозначения маркированного списка.

CSS стили списка маркера.

list-style-type

Значение
:

disk –
маркированный список в виде закрашенного кружка

circle –
маркированный список в виде не закрашенного кружка

square –
маркированный список в виде закрашенного квадратика

decimal –
нумерованный список арабскими числами (1,2,3 и т.д.)

upper-roman –
нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

lower-roman –
нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

upper-alpha –
нумерованный список заглавными буквами (A,B,C и т.д.)

lower-alpha –
нумерованный список строчными буквами (a,b,c и т. д.)

none –
без маркера.

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.
Жизнь — это болезнь, со смертельным исходом.
Никогда не говори никогда.

Результат
:

Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

list-style-type:

none;

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.
Никогда не говори никогда.

Результат
:

Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image
.

list-style-image

list-style-image:

url(картинка.png);

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.
Жизнь — это болезнь со смертельным исходом.
Никогда не говори никогда.

Результат
:

Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left
для селектора li.

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.
Жизнь — это болезнь со смертельным исходом.
Никогда не говори никогда.

Результат
:

Следующая задача состоит в том, чтобы изменить цвет маркера, но при этом не изменять цвет текста. Как это возможно сделать? Цвет маркера можно изменить, если к тесту добавить тег .
Это выглядит вот так:

текст

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.
Жизнь — это болезнь со смертельным исходом.
Никогда не говори никогда.

Результат
:

Дополнение к общей теме.

Если вам нужно, по каким-либо причинам, задать нумерацию списка маркера не с нуля, а, допустим, с 8, вы можете сделать такой ход.

Пример
:

Свойства списков в css

Верь в лучшее, ожидай худшее.Пункт 1
Жизнь — это болезнь со смертельным исходом.Пункт 2
Никогда не говори никогда.Пункт 3
Это все что я знал. Пункт 4

Результат
:

Вот и подошла к завершению тема .

Таблица спецсимволов

Вид	HTML-код	CSS-код	Описание
		\2603	Снеговик
		\2626	Православный крест
		\2693	Якорь
➳	➳	\27B3	Стрела направо
✆	✆	\2706	Знак телефона
		\2615	Горячие напитки
✎	✎	\270E	Карандаш, направленный вправо-вниз
		\270F	Карандаш
✐	✐	\2710	Карандаш, направленный вправо-вверх
✑	✑	\2711	Незакрашенное острие пера
		\2712	Закрашенное острие пера
		\269C	Геральдическая лилия
		\26D1	Шлем с белым крестом
⚝	⚝	\269D	Начерченная белая звезда
		\2744	Снежинка
		\2764	Закрашенное жирное сердце
❅	❅	\2745	Зажатая трилистниками снежинка
❆	❆	\2746	Жирная остроугольная снежинка
★	★	\2605	Закрашенная звезда
☆	☆	\2606	Незакрашенная звезда
✪	✪	\272A	Незакрашенная звезда в закрашенном круге
✫	✫	\272B	Закрашенная звезда с незакрашенным кругом внутри
✯	✯	\272F	Вращающаяся звезда
❉	❉	\2749	Звёздочка с шарообразными окончаниями
❋	❋	\274B	Жирная восьмиконечная каплеобразная звёздочка-пропеллер
✲	✲	\2732	Звёздочка с незакрашенным центром
⍟	⍟	\235F	Apl функциональный символ звезда в круге
⊛	⊛	\229B	Оператор звездочки в круге
		\2600	Закрашенное солнце с лучами
		\2601	Облака
		\2602	Зонтик
		\2611	Галочка в квадрате
☒	☒	\2612	Крестик в квадрате
		\2639	Нахмуренный смайлик
		\263A	Улыбающийся смайлик
☻	☻	\263B	Закрашенный улыбающийся смайлик
☭	☭	\262D	Серп и молот
☰	☰	\2630	Триграмма
✿	✿	\273f	Закрашенный цветок
❀	❀	\2740	Незакрашенный цветок
✾	✾	\273E	Цветок с шестью лепестками
❁	❁	\2741	Закрашенный обведённый цветок
❂	❂	\2742	Цветок из точек
		\2709	Конверт
❦	❦	\2766	Сердце в виде цветка
❶	❶	\2776	Номер 1
❷	❷	\2777	Номер 2
❸	❸	\2778	Номер 3
❹	❹	\2779	Номер 4
❺	❺	\277A	Номер 5
❻	❻	\277B	Номер 6
❼	❼	\277C	Номер 7
❽	❽	\277D	Номер 8
➒	➒	\2792	Номер 9
➓	➓	\2793	Номер 10
➠	➠	\27A0	Летящая стрела
➤	➤	\27A4	Наконечник стрелы
➥	➥	\27A5	Изогнутая стрела, указывающая вниз и вправо
➦	➦	\27A6	Изогнутая стрела, указывающая вверх и вправо
❜	❜	\275C	Жирная одинарная верхняя запятая
❛	❛	\275B	Жирная одинарная повёрнутая верхняя запятая
		\2716	Жирный знак умножения
✘	✘	\2718	Жирный крестик
		\2714	Жирная отметка галочкой
✚	✚	\271A	Жирный крест
↺	↺	\21BA	Круглая стрелка с наконечником против часовой стрелки
↻	↻	\21BB	Круглая стрелка с наконечником против часовой стрелки
		\003C	Знак «меньше чем» (начало тега)
>	>	\003E	Знак «больше чем» (конец тега)
\00AB	Левая двойная угловая скобка
\00BB	Правая двойная угловая скобка
‹	‹	\2039	Левая угловая одиночная кавычка
›	›	\203A	Правая угловая одиночная кавычка
«	\0022	Двойная кавычка
′	′	\2032	Одиночный штрих
″	″	\2033	Двойной штрих
‘	‘	\2018	Левая одиночная кавычка
’	’	\2019	Правая одиночная кавычка
‚	‚	\201A	Нижняя одиночная кавычка
“	“	\201C	Левая двойная кавычка
”	”	\201D	Правая двойная кавычка
„	„	\201E	Нижняя двойная кавычка
&	&	\0026	Амперсанд
‘	‘	\0027	Апостроф (одинарная кавычка)
§	§	\00A7	Параграф
		\00A9	Знак copyright
¬	¬	\00AC	Знак отрицания
		\00AE	Знак зарегистрированной торговой марки
¯	¯	\00AF	Знак долготы над гласным
°	°	\00B0	Градус
±	±	\00B1	Плюс-минус
¹	¹	\00B9	Верхний индекс «1»
²	²	\00B2	Верхний индекс «2»
³	³	\00B3	Верхний индекс «3»
¼	¼	\00BC	Одна четверть
½	½	\00BD	Одна вторая
¾	¾	\00BE	Три четверти
´	´	\00B4	Знак ударения
µ	µ	\00B5	Микро
¶	¶	\00B6	Знак абзаца
·	·	\00B7	Знак умножения
¿	¿	\00BF	Перевернутый вопросительный знак
ƒ	ƒ	\0192	Знак флорина
		\2122	Знак торговой марки
•	•	\2022	Маркер списка
…	…	\2026	Многоточие
‾	‾	\203E	Надчеркивание
–	–	\2013	Среднее тире
—	—	\2014	Длинное тире
‰	‰	\2030	Промилле
}	}	\007D	Правая фигурная скобка
{	{	\007B	Левая фигурная скобка
=	=	\003D	Знак равенства
≠	≠	\2260	Знак неравенства
≅	≅	\2245	Конгруэнтность (геометрическое равенство)
≈	≈	\2248	Почти равно
≤	≤	\2264	Меньше чем или равно
≥	≥	\2265	Больше чем или равно
∠	∠	\2220	Угол
⊥	⊥	\22A5	Перпендикулярно (кнопка вверх)
√	√	\221A	Квадратный корень
∑	∑	\2211	N-ичное суммирование
∫	∫	\222B	Интеграл
←	←	\2190	Стрелка влево
↑	↑	\2191	Стрелка вверх
→	→	\2192	Стрелка вправо
↓	↓	\2193	Стрелка вниз
		\2194	Стрелка влево-вправо
↵	↵	\21B5	Стрелка вниз и влево – знак возврата каретки
⇐	⇐	\21D0	Двойная стрелка налево
⇑	⇑	\21D1	Двойная стрелка вверх
⇒	⇒	\21D2	Двойная стрелка направо
⇓	⇓	\21D3	Двойная стрелка вниз
⇔	⇔	\21D4	Двойная стрелка влево-вправо
¢	¢	\FFE0	Цент
£	£	\FFE1	Фунт стерлингов
₽	₽	\20BD	Российский рубль
¥	¥	\00A5	Йена или юань
€	€	\20AC	Евро
$	$	\0024	Доллар
₴	₴	\20B4	Знак гривны
₹	₹	\20B9	Индийская рупия
圓	圓	\5713	Китайский юань
₸	₸	\20B8	Казахстанский тенге

Как ввести координаты в яндекс картах и найти точку

Список с рисованными маркерами

Пример 3. Использование изображения в качестве маркера

Списки

Сепульки
Сепулькарии
Сепуление

Рис. 4. Рисунок в качестве маркера

Применение list-style-image
обладает некоторыми недостатками:

рисунок нельзя сдвинуть вверх или вниз;
в разных браузерах положение рисунка относительно текста может отличаться.

Css оформление маркеров списка

Внешний вывод будем прописывать в файле стилей style.css
. Он может называться и по-другому, но иметь расширение.css.

Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.

Формирует список в css код ul
— с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.

Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:

Ul {list-style-type: circle}

Ul {list-style-type: none}

Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox — Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».

Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul
:

Post-content ul {list-style-type: circle}

Или другой пример:

#content-blok ul{list-style-type:square}

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

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

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

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

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

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

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

Стиль:

Тип маркера

Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка 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 — значение принимается от родительского элемента. Для обоих списков

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

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

Вид маркера

disc
— маркеры в виде закрашенного кружка;
circle
— маркеры в виде незакрашенного кружка;
square
— квадратные маркеры.

Пример 1. Изменение вида маркера

Списки

Сепульки
Сепулькарии
Сепуление

Пример 2. Использование::before

Списки

Сепульки
Сепулькарии
Сепуление

Рис. 2. Произвольные маркеры в списке

Рис. 3. Выбор символа в LibreOffice

Пример 3. Использование изображения в качестве маркера

Списки

Сепульки
Сепулькарии
Сепуление

Рис. 4. Рисунок в качестве маркера

Применение list-style-image
обладает некоторыми недостатками:

рисунок нельзя сдвинуть вверх или вниз;
в разных браузерах положение рисунка относительно текста может отличаться.

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

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

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

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

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

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

Стиль:

Подчеркивание ссылок

По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; }  
    </style>
  </head>

  <body>
    <p><b><a href="#">обычная ссылка</a></b></p>
  </body>
</html>

Попробовать »

Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.

Убираем маркеры по умолчанию

Иногда нужно просто убрать их. Например, при оформлении меню или чего-то другого. За отображение маркеров отвечает свойство list-style-type или сокращенное list-style . Значением по умолчанию выступает circle , то есть черный закрашенный кружочек. Чтобы убрать его, всего лишь нужно написать так:

Ul{
List-style-type: none;
}

Ul{
List-style: none;
}

Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам

Это очень важно. Вышеприведенная запись убирает маркеры у всех списков на вашем сайте, но может быть так, что у вас будет несколько оформлений списков

В таком случае справиться с их стилизацией помогут классы. Нужным спискам просто вешаете стилевой класс и оформляете их.

Убираем маркеры по умолчанию

Ul{
List-style-type: none;
}

Ul{
List-style: none;
}

Заметьте, что свойство записывается всему списку в общем, а не отдельным его пунктам

Отступ списка

При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left, которое позволяет регулировать внутренний отступ:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      ul { 
	    list-style-type: none;
        padding-left: 0;		
	  }
	  ol { padding-left: 0;	}
    </style>
  </head>

  <body>
    <ul>
      <li>Кофе</li><li>Чай</li>
    </ul>
	<ol>
      <li>Кофе</li><li>Чай</li>
    </ol>
  </body>
</html>

Попробовать »

В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах — по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов <li>, а просто скрываются за краем окна браузера.

Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:

outside — маркер располагается слева от содержимого (является значением по умолчанию)
inside — маркер располагается внутри пункта списка вместе с содержимым

Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  li { border: 1px solid red; }
      .class1 { list-style-position: outside; }
      .class2 { list-style-position: inside; }
      .class3 { 
	    list-style-position: inside;
		padding-left: 0;
	  }
    </style>
  </head>

  <body>
    <ul class="class1">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class2">
      <li>Кофе</li><li>Чай</li>
    </ul>
    <ul class="class3">
      <li>Кофе</li><li>Чай</li>
    </ul>
  </body>
</html>

Попробовать »

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

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

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

Первый пункт
Второй пункт

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

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

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

Стиль:

16171819

#nl3
{
list-style-image: url(«marker.jpg»);
}

HTML код:

34353637

Первый пункт
Второй пункт

Убрать маркированный список css. css: как убрать точку в нумерации списка ol

Вид маркера

Маркированные списки в HTML

1.1 Стандартные маркеры для маркированного списка

1.2 Маркер списка в виде пустого круга

1.3 Маркер списка в виде квадрата

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

2. Изображения для элементов списка list-style-image

3. Местоположение маркера списка list-style-position

list-style-type

list-style-image

Таблица спецсимволов

Список с рисованными маркерами

Css оформление маркеров списка

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

Тип маркера

Вид маркера

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

Подчеркивание ссылок

Убираем маркеры по умолчанию

Убираем маркеры по умолчанию

Отступ списка

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

1.1
Стандартные маркеры для маркированного списка

1.2
Маркер списка в виде пустого круга

1.3
Маркер списка в виде квадрата