ol列表行高必须设在li上，因li默认块级且形成行框；设在ol上常无效，主因父容器font-size:0或li被改为inline/flex导致line-height失效。
ol列表的行高该设在哪个元素上
必须设在 ol 或 li 上，不能设在 ol li::marker 或内联文本容器（如 span）上——line-height 只对形成行框的块级或行内块容器生效，而 li 默认是块级元素，天然支持。
为什么直接给 ol 设 line-height 有时没反应
常见原因是父容器用了 font-size: 0（比如为了清除 inline 元素间隙），导致无单位 line-height 计算结果为 0；或者 li 被意外设为 display: inline / flex，脱离了文本流，line-height 失效。
- 用浏览器开发者工具检查 “Computed” 面板里的
line-height实际值，不是只看 “Styles” 里有没有写 - 确保
li保持display: block（默认值），别被其他规则覆盖 - 如果用了
counter-reset+counter-increment自定义序号，line-height仍要作用于li，不是伪元素
单行 vs 多行 li 的行高控制差异
单行 li：设 line-height 等于容器高度可垂直居中；多行 li：line-height 只控制每行间距，整体高度由内容撑开，此时需配合 min-height 或 padding 控制视觉节奏。
- 单行场景推荐：
li { line-height: 1.6; }（无单位，响应式友好） - 固定像素控高（如后台列表）：
li { line-height: 40px; }，但注意用户放大字体时可能重叠 - 含换行、图片或子元素的
li：放弃纯line-height，改用padding: 12px 0;或display: flex; align-items: center;
ol 序号和文字不对齐怎么办
这不是 line-height 的问题，而是 vertical-align 和 list-style-position 的组合影响。默认序号在左侧，文字基线与序号底部对齐，容易看起来“偏下”。
- 加
list-style-position: inside;把序号放进内容区，再配合line-height统一控制 - 更稳方案：用
display: flex;拆解序号和内容，例如li { display: flex; align-items: center; }，然后用::before生成序号 - 避免用
margin-top或transform微调序号位置——它不参与行框计算，容易在不同字号下错位
line-height 已经不够用了。这时候得跳出传统 ol/li 结构，用语义化但可控的布局替代。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
