列表标志与文字不对齐本质是浏览器对::marker和文本基线处理不一致；list-style-position: inside因标志不参与line-height计算而偏上，尤其中文小字号下更明显；推荐用flex重写对齐逻辑或用::marker微调vertical-align。
列表标志（list-style 生成的圆点、数字等）和文字对不齐，本质是浏览器对 ::marker 和内容文本的基线处理不一致，不是“写错了”，而是默认行为没被显式约束。
为什么 list-style-position: inside 总是看起来偏上？
它把标志塞进 li 内容流里，但标志本身没有行高参与，而文字受 line-height 影响；结果就是标志贴着文字顶部，尤其在小字号（如 font-size: 12px）或中文字体下更明显。
-
list-style-position: inside的标志不参与line-height计算，只按字体度量定位 - 中文 Web Font 的 x-height 和降部比西文更不可控，同一段 CSS 在 Chrome 和 Safari 渲染偏差可达 1–2px
- 若
li含图标或sup/sub，标志会进一步错位——因为它们各自有独立 baseline
用 display: flex 替代原生列表标记
绕过 ::marker 的不可控性，手动控制标志与文字的关系。关键不是“去掉列表”，而是“重写对齐逻辑”。
- 给
ul设display: flex; flex-direction: column;，并重置默认间距：margin: 0; padding: 0; - 每个
li改为display: flex; align-items: center;，再用gap: 0.5rem控制标志与文字距离 - 标志用伪元素或
span实现：li::before { content: "•"; display: inline-block; width: 0.8em; }，并显式设vertical-align: middle或align-self: center - 避免给标志设
font-size直接缩放——改用transform: scale(0.8)更稳定，不影响 baseline 定位
保留原生 list-style 时微调 ::marker
现代浏览器（Chrome 97+、Firefox 89+、Safari 15.4+）已支持 ::marker 伪元素样式，但兼容性需谨慎。
立即学习“前端免费学习笔记（深入）”；
- 仅能设置有限属性：
color、content、font系列、text-align、vertical-align，不能设margin或padding - 用
vertical-align: -0.125em比middle可靠，适配多数中文字体的 x-height - 若需兼容 IE 或旧 Edge，必须回退到
flex方案——::marker在这些浏览器中完全无效 -
content可覆盖默认符号，例如content: "→ "，但注意空格会参与排版，建议用white-space: pre控制
真正卡住对齐效果的，从来不是“该用哪个属性”，而是容器高度是否明确、标志是否脱离 inline 流、以及是否混用了不同 baseline 行为的子元素。哪怕只改一行 min-height: 1.5em 在 li 上，也可能比调十次 vertical-align 更管用。
