list-style-position

list-style-position CSS 属性设置 ::marker 相对于列表项的位置。

试试看

语法

css

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

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;

list-style-position 属性指定为下面列出的关键字值之一。

值

inside: ::marker 是列表项内容中的第一个元素。
outside: ::marker 在主块框之外。这是 list-style 的默认值。

描述

此属性应用于列表项，即具有 display: list-item; 的元素。默认情况下这包括 <li> 元素。由于此属性是继承的，因此可以在父元素（通常是 <ol> 或 <ul>）上设置它，以使其应用于所有列表项。

如果块元素是声明为 list-style-position: inside 的列表元素的第一个子元素，则块元素将放置在标记框后的行上。

使用简写形式 list-style 通常更方便。

正式定义

初始值	`outside`
应用于	列表项
继承	是
计算值	如指定
动画类型	离散

正式语法

list-style-position = 
  inside   |
  outside

示例

设置列表项位置

HTML

html

<ul class="inside">
  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="outside">
  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="inside-img">
  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

css

.inside {
  list-style-position: inside;
  list-style-type: square;
}

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

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

结果

规范

规范
CSS 列表和计数器模块级别 3 # list-style-position-property

浏览器兼容性

BCD 表格仅在浏览器中加载