list-style-position

Internet Explorer			Chrome			Opera			Safari			Firefox
6.0	7.0	8.0	2.0	3.0	4.0	9.2	9.6	10	2.0	3.1	4.0	2.0	3.0	3.6

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

Значение по умолчанию	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

Описание

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Рис. 1

Рис. 1. Значение outside

Рис. 2

Рис. 2. Значение inside

Синтаксис

list-style-position: inside | outside

Значения

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

Пример

HTML 4.01CSS 2.1CSS 3IE 6IE 7IE 8Op 9.6Op 10Sa 3.1Sa 4Cr 3Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>list-style-position</title>
  <style type="text/css">
   UL {
    list-style-image: url('book.gif'); /* Путь к рисунку для установки маркера */
    list-style-position: inside; /* Маркер обтекается текстом */
   }
  </style>
 </head> 
 <body> 
  
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetuer adipiscing elit</li>
   <li>Sed diem nonummy nibh euismod</li>
   <li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
   enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
   nisl ut aliquip ex ea commodo consequat.</li>
  </ul>
  
 </body>
</html>

Результат данного примера показан ни рис. 3.

Рис. 3

Рис. 3. Применение свойства list-style-position

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

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

Браузеры

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

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