list-style-position

list-style-position 列表样式位置属性指定标记框在主块框中的位置。

示例

/* keyword values */
list-style-position: inside;
list-style-position: outside;

/* global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: unset;

浏览器支持

浏览器都支持 list-style-position

语法：

list-style-position ： outside | inside

取值

• outside ：列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• inside ：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

说明：

设置或检索作为对象的列表项标记如何根据文本排列。

• 仅作用于具有<display>值等于list-item的对象（如li对象）。
• 注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。
• 对应的脚本特性为 listStylePosition 。

例子

//HTML
<ul class="one"> list 1
  <li>list item 1-1</li>
  <li>list item 1-2</li>
  <li>list item 1-3</li>
  <li>list item 1-4</li>
</ul>
<ul class="two"> list 2
  <li>list item 2-1</li>
  <li>list item 2-2</li>
  <li>list item 2-3</li>
  <li>list item 2-4</li>
</ul>
<ul class="three"> list 3
  <li>list item 3-1</li>
  <li>list item 3-2</li>
  <li>list item 3-3</li>
  <li>list item 3-4</li>
</ul>

//CSS
.one {
  list-style:square inside;
}

.two {
  list-style-position: outside;
  list-style-type: circle;
}

.three {
  list-style-image: url("starsolid.gif");
  list-style-position: inherit;
}