使用CSS list-style-position属性

CSS的list-style-position属性是用来指定列表项标记（li元素）与列表文本（放在li元素中间的文本内容）之间的位置关系。

一、基本使用

默认情况下，CSS list-style-position属性取值为outside，表示标记放在列表项文本前面。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

ul {
  list-style-position: outside;
}

上述代码的效果为：

• 列表项1
• 列表项2
• 列表项3

二、inside取值

如果我们将CSS list-style-position属性的取值改为inside，则标记将会出现在列表项文本的内部。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

ul {
  list-style-position: inside;
}

上述代码的效果为：

• 列表项1
• 列表项2
• 列表项3

三、列表项标记的自定义样式

CSS list-style-type属性可以用来指定标记的类型。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

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

上述代码的效果为：

• 列表项1
• 列表项2
• 列表项3

四、总结

CSS list-style-position属性的取值可以是outside或inside，用来指定标记的位置。默认情况下，取值为outside；而CSS list-style-type属性则可以用来指定标记的类型，比如square、circle等等。