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;
}

效果如下：

1. Apple
2. Banana
3. Cherry

列表项标记放置于内容框外 (outside)

ul {
  list-style-position: outside;
}

效果如下：

1. Apple
2. Banana
3. Cherry

注意事项

• 默认情况下，标记的位置是在内容框之外（list-style-position: outside;）。
• 当列表项是一个复合属性时（例如：list-style: circle inside;），属性值需要使用该属性的语法来设置。
• 如果列表项中只包含图片作为标记，更改该属性的值将不会影响标记的位置。
• 如果列表项中嵌套了其他元素，这些元素不会受到 list-style-position 属性的影响。

总结

CSS list-style-position属性可以很好地控制列表项的标记位置。选择更换标记的位置是否合理也需要考虑内容排版的流畅性。