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等等。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/237456.html
微信扫一扫 
支付宝扫一扫 