CSS list-style-position 语法
在 CSS 中，list-style-position 属性用于定义列表项符号的位置。
语法：
list-style-position: 关键字;说明：
list-style-position 的取值有 2 种，如下表所示。
| 取值 | 说明 |
|---|---|
| outside（默认值） | 列表项符号在外侧 |
| inside | 列表项符号在内侧 |
list-style-position 属性通常应用于列表元素（ul 或 ol），其值会被其内部的 li 元素继承。也可以直接应用于 li 元素。
CSS list-style-position 摘要
| 属于 | CSS 列表 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 是 |
| 默认值 | outside |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS list-style-position 示例
接下来，我们通过一个简单的例子来讲解一下 CSS list-style-position 属性是如何使用的。
示例：list-style-position 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul {
width: 150px;
background-color: skyblue;
list-style-position: outside;
}
</style>
</head>
<body>
<ul>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
<li>绿叶网 - 为好教程，全力以赴</li>
</ul>
</body>
</html>页面效果如下图所示。
分析：
对于这个例子来说，如果使用的是 list-style-position: inside;，此时页面效果如下图所示。
