中英文混合列表对齐本质是基线不一致，需用flex+align-items:center解决；多级嵌套必须显式声明type属性；标点统一或等宽字体可缓解错位；语义连贯性比视觉对齐更重要。
中英文混合列表的对齐问题本质是基线不一致，不是编号或缩进问题
浏览器渲染 <ol></ol> 时，编号和内容默认按 baseline 对齐。但中文字符（如“第一步”）视觉重心偏下，英文单词（如“Step 1”）有 ascender/descender，导致同一行内文字看起来“一高一低”，尤其在 <li> 内混写时更明显。这不是 text-align 能解决的，强行设 vertical-align: middle 会破坏编号与文字的关联逻辑。
用 display: flex + align-items: center 精确控制单行内文字垂直居中
给 <li> 设为 flex 容器，可绕过 baseline 对齐陷阱：
<style>
ol.hybrid li {
display: flex;
align-items: center;
line-height: 1.5;
}
ol.hybrid li::marker {
margin-right: 8px;
}
</style><ol class="hybrid" type="1">
<li>准备材料（Prepare materials）</li>
<li>开始制作（Start production）</li>
</ol>
-
::marker是现代浏览器支持的伪元素，专用于控制编号样式和间距，比老式padding-left更精准 - 避免对整个
<ol></ol>设vertical-align—— 它不生效，且会干扰嵌套结构 - 若需兼容 IE，改用
line-height配合固定高度容器，但会牺牲响应性
多级嵌套时，type 属性必须逐层显式声明，不能依赖浏览器自动推断
比如要实现 “A. → 1. → a.” 三级结构，很多人以为只在顶层设 type="A"，子层就会自动降级，实际不会。浏览器对嵌套 <ol></ol> 的计数器是独立的，必须手动指定：
<ol type="A">
<li>HIV 感染（HIV infection）</li>
<ol type="1">
<li>仅编码确诊案例（Code only confirmed cases）</li>
<ol type="a">
<li>患者因甲状腺功能减退就诊，疑似 HIV（Patient being seen for hypothyroidism with possible HIV）</li>
</ol>
</ol>
</ol>
- 漏写任意一层
type，该层将回退到默认decimal（阿拉伯数字），破坏语义层级 - 不要用 CSS 的
list-style-type替代 HTMLtype属性——前者不触发可访问性 API 中的编号读出逻辑 - 如果某级需带点号（如 “A.”、“1.”），用
::marker { content: counter(list-item) "."; }自定义，但需配合counter-reset重置计数器
中英文混排列表项里，空格和标点宽度差异会导致视觉错位，需统一处理
中文括号（“（”“）”）全角、英文括号（“(”“)”）半角；中文顿号、英文逗号宽度也不同。混用时，即使文字对齐了，标点也会“跳出来”。
- 统一使用中文标点：把英文括号替换成全角，逗号换成顿号，但注意影响机器可读性（如 JSON 解析、SEO 抓取）
- 更稳妥的做法是用
font-family强制等宽字体族：font-family: "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;，让中英文字符字宽更接近 - 对关键字段（如“步骤 1”“Step 1”）加
<span class="en"></span>并设font-variant-numeric: tabular-nums;，确保数字对齐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
