列表标记位置属性

最后更新：2026-09-13

list-style-position 列表标记位置属性

list-style-position 属性控制列表项标记相对于列表内容的位置。默认值 outside 让标记位于内容块外部，不影响首行文本对齐；inside 则将标记放入内容块内部，使文本环绕标记排列。它影响列表的排版流和缩进效果。

list-style-position: outside | inside;

值	类型	描述
`outside \| inside`	关键字	标记位置

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
list-style-position	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： outside 是默认值，保证多行文本的首行和后续行对齐；inside 适合短文本，让标记和文本视觉上更紧凑。

Qoutside 和 inside 对列表布局有什么影响？

Aoutside（默认）：标记位于 li 内容块之外，文本块整体左对齐，多行时所有行对齐整齐，标记与文本间保持标准间距；inside：标记位于内容块内部，第一行被标记挤占产生缩进，后续行与标记下方对齐。outside 适合多行长文本，inside 视觉上更紧凑。

Q为什么 outside 时文本看起来更整齐？

A因为 outside 模式下标记不占内容块的宽度，文本块是一个完整的矩形区域，所有行左边缘对齐；inside 模式下第一行被标记挤占出一段缩进，视觉上首行与后续行不对齐。所以多行文本列表建议用默认的 outside，保证每行对齐。

Q如何让列表标记和文字垂直居中对齐？

Alist-style-position 无法精细控制标记对齐。常用做法：list-style: none 去掉标记，用 li::before 插入 content: "•"（或图标），配合 flex + align-items: center 实现标记与文字垂直居中，再统一控制间距。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。