CSS свойство list-style-position

CSS свойства

Определение и применение

CSS свойство list-style-position определяет расположение маркера / цифры относительно элемента списка (располагается внутри элемента списка вместе с содержимым, либо за границей элемента списка).

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
list-style-position1.01.03.51.04.012.0

CSS синтаксис:

list-style-position:"inside | outside | initial | inherit";

JavaScript синтаксис:

object.style.listStylePosition = "outside"

Значения свойства

ЗначениеОписание
outsideУказывает, что маркер / цифра располагается слева от текста за границей элемента списка. Это значение по умолчанию.
insideУказывает, что маркер / цифра располагается слева от текста внутри элемента вместе с содержимым. Текст смещается внутри элемента на расстояние, которое занимает маркер.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style-position.</title>
<style> 
li {
border : 1px solid orange; /* устанавливаем сплошную границу размером 1px оранжевого цвета для всех элементов списка*/
}
.test {
list-style-position : outside; /* указываем, что маркер располагается слева от текста за границей элемента списка */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
.test2 {
list-style-position : inside; /* указываем, что маркер располагается слева от текста внутри элемента вместе с содержимым */
background-color : khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>
Пример использования CSS свойства list-style-position (расположение маркера).
Пример использования CSS свойства list-style-position (расположение маркера).
CSS свойства