CSS list-style-position 属性
CSS list-style-position 属性
CSS list-style-position 属性用于定义列表项标记(bullets)或数字列表项的位置。可以将标记放置在列表项内部(inside)或者列表项外部(outside)。
语法
list-style-position: inside | outside;
属性取值
- inside - 将标记放置在每个列表项的内容框内。
- outside - 将标记放置在包含列表项的内容框外。
举例
对于以下的HTML代码:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
列表项标记放置于内容框内 (inside)
ul {
list-style-position: inside;
}
效果如下:
- Apple
- Banana
- Cherry
列表项标记放置于内容框外 (outside)
ul {
list-style-position: outside;
}
效果如下:
- Apple
- Banana
- Cherry
注意事项
- 默认情况下,标记的位置是在内容框之外(
list-style-position: outside;
)。 - 当列表项是一个复合属性时(例如:
list-style: circle inside;
),属性值需要使用该属性的语法来设置。 - 如果列表项中只包含图片作为标记,更改该属性的值将不会影响标记的位置。
- 如果列表项中嵌套了其他元素,这些元素不会受到
list-style-position
属性的影响。
总结
CSS list-style-position属性可以很好地控制列表项的标记位置。选择更换标记的位置是否合理也需要考虑内容排版的流畅性。