list-style-position取值决定标记与文本的排版关系：outside使换行文本左边缘不对齐首行，inside则侵占内容区宽度并影响盒模型；二者在响应式或嵌套场景易致视觉错位，需手动补偿或改用语义化替代方案。
list-style-position 的取值直接影响列表项标记（如圆点、数字）与文本的相对排版关系，不是“加个样式就完事”的简单操作。关键在于：默认 outside 会导致文本换行时悬空缩进，而 inside 虽能对齐首行，但会破坏块级容器的盒模型边界 —— 这两点在响应式布局或嵌套列表中极易引发视觉错位。
为什么 list-style-position: outside 下第二行文本不和第一行左对齐
这是 outside 的标准行为：标记被渲染在 <li> 的 padding-left 区域外侧，文本内容从 padding-left 起始；当文本换行时，第二行直接顶到容器左边缘，不再受标记影响。
- 浏览器不会为标记预留额外的“文本对齐参考线”，它只控制标记自身位置
- 若想让多行文本整体左对齐，必须手动设置
padding-left或用text-indent补偿 -
display: flex或display: grid替代<ul>/<li> </ul>可绕过此限制，但失去语义化
list-style-position: inside 会吃掉父容器的 padding
使用 inside 时，标记被当作首行内联元素插入文本流，其宽度会计入 <li> 的内容区，导致实际可用宽度变小 —— 如果父 <ul></ul> 有 padding-left: 20px，<li> 内部的文本可能被挤到更右侧，甚至触发意外换行。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 该行为在 Safari 和旧版 Edge 中尤为明显，Firefox 渲染稍宽松
- 不能依赖
box-sizing: border-box修复，因为标记不属于盒模型内容区 - 调试时可临时加
background: yellow到<li>查看真实内容宽度收缩情况
用 JavaScript 动态切换 listStylePosition 要注意 DOM 同步时机
通过 element.style.listStylePosition = "inside" 设置后，CSS 计算值不一定立刻反映在 getComputedStyle(element).listStylePosition 中，尤其在元素尚未渲染或处于 display: none 状态时。
- 读取前建议先触发重排，例如访问
offsetHeight - 避免在
requestAnimationFrame回调外直接读取计算值 - 若需监听变化，用
MutationObserver监听style属性不如监听class切换可靠
真正难处理的是混合场景：比如一个 <ul></ul> 里部分 <li> 需要 inside 对齐短标题，另一些要 outside 配合长描述 —— 此时无法靠单一 CSS 规则统一控制，得拆成独立 class 并手动管理 padding/indent，而不是幻想靠一个属性自动适配所有内容长度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
