直接在ol的li中放img会导致序号与图文错位，因img默认vertical-align:baseline；解决方案一是用list-style-position:inside配合inline-block和vertical-align:middle；二是用flex模拟列表，伪元素生成序号；三是用background-image替代img并设padding-left预留空间。
ol 里直接放 <img> 会破坏序号对齐
浏览器默认把 <img> 当作行内元素塞进 <li>，但图片高度、垂直对齐方式（vertical-align 默认是 baseline）会让序号和图片上下错位，看起来像序号“飘”在半空或沉底。这不是 bug，是 CSS 渲染规则的自然结果。
常见错误写法：
<ol> <li>@@##@@ 第一项</li> <li>@@##@@ 第二项</li> </ol>此时序号常与图片底部对齐，文字却贴着图片顶部，视觉割裂。
用 list-style-position: inside 配合 display: inline-block 控制对齐
核心思路：让序号“进入” <li> 内容流，再统一控制图片和文字的基线。
- 给
<ol></ol>加list-style-position: inside，序号不再悬挂在左侧空白区，而是作为<li>的第一部分参与排版 - 把
<img src="a.jpg">设为display: inline-block，这样它才有vertical-align可控 - 统一设
vertical-align: middle或vertical-align: text-bottom，让图片、序号、文字三者视觉居中
实操示例：
<ol style="list-style-position: inside;"> <li>@@##@@ 第一项</li> <li>@@##@@ 第二项</li> </ol>
height:1.2em 是关键——用相对单位适配字体大小，避免图片撑开行高。
更稳妥的方案：用 flex 替代原生序号
当需要精确控制图标位置、支持响应式或兼容老浏览器时，放弃 <ol></ol> 的自动序号，改用 <div> + <code>display: flex 模拟。
- 序号用伪元素
::before生成，内容可控、样式自由 -
<img src="b.jpg">和文字都作为 flex 子项，用align-items: center天然对齐 - 完全规避原生
<ol></ol>的渲染不可控性
最小可行代码：
<div class="custom-ol">
<div class="item">@@##@@ 第一项</div>
<div class="item">@@##@@ 第二项</div>
</div>
<style>
.custom-ol .item {
display: flex;
align-items: center;
margin-bottom: 0.5em;
}
.custom-ol .item::before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
margin-right: 0.5em;
}
</style>
别忽略图片加载失败时的降级处理
网络波动或路径错误导致 <img> 显示为缺省占位框（小图标+叉），会严重破坏列表整齐度，尤其在 inline-block 场景下。
- 务必加
alt属性，既利于可访问性，也提供文字 fallback - 用
onerror内联事件或 JS 监听error事件，动态替换为 SVG 占位符或隐藏图片 - 如果图片只是装饰，考虑改用 CSS
background-image，配合background-size: contain和padding-left预留空间，比<img src="a.jpg" style="max-width:90%">更稳定
例如：
真正麻烦的是混合了不同尺寸图片的列表——哪怕用了 flex，也要手动约束 max-width 和 height: auto，否则窄图留白、宽图溢出，序号对齐又会失效。
