list-style-position

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	outside
Наследуется	Да
Применяется	К тегам <dd>, <dt>, <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Свойство list-style-position позиционирует маркер списка.

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

Порядок установки расширенных свойств:

1. list-style-type
2. list-style-position
3.list-style-image

Свойство применимо к элементам списка,создано в версии CSS1 но проходит валидацию согласно версии CSS3.

Дополнительные свойства list-style-position

Свойство	Описание
list-style-type	Устанавливает стиль списку на основании именных значений
list-style-image	Маркером служит изображение

Дополнительные значения list-style-position

Значение	Описание
outside	Маркеры позиционируются вне содержания
inside	Маркеры позиционируются внутри содержания
inherit	Маркеры позиционируются относительно родительского элемента

Синтаксис

list-style-position: inside | outside

Значения

inside: Маркер является частью текстового блока и отображается в элементе списка.
outside: Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство list-style-position</title>
<meta charset="utf-8">
<style type="text/css">
<!--
ul {
list-style-image: url(http://free20860soft.narod.ru/CSS_3/img_css_3/list_style.gif);
list-style-position: inside;
color:green;
text-decoration:blink;
font-size:18px;
}
ol {
list-style-image: url(http://free20860soft.narod.ru/CSS_3/img_css_3/list_style2.gif);
list-style-position: outside;
color:orange;
text-decoration:blink;
font-size:18px;
}
-->
</style>
</head>
<body>
<p>Добавляем списку значение inside</p>
<ul>
<li>Добавляем</li>
<li>Маркер</li>
<li>При подобно заданном значении дополнительно существующий текст будет находится с маркером в одной зоне и существующий контент будет облегать маркер</li>
</ul>
<p>Добавляем списку значение outside</p>
<ol>
<li>Добавляем</li>
<li>Маркер</li>
<li>При подобно заданном значении дополнительно существующий текст будет находится с маркером в разных зонах и существующий текст будет отделён от маркера</li>
</ol>
</body>
</html>

Пример в действии

Объектная модель

[window.]document.getElementById("elementID").style.listStylePosition

Браузеры

В браузере Internet Explorer 6 при использовании нумерованного списка <ol> и значения inside свойства list-style-position, числа идущие с 10, начинают накладываться на текст списка.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источник: http://htmlbook.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Списки | Добавил: free20860soft (01.07.2013)

Просмотров: 647 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]