<ol>图文混排需控高宽与对齐：图片必设height+vertical-align:middle，或用flex；加载失败需显式宽高占位；复杂场景应弃用<ol>改用语义化替代结构。
直接在 <li> 里放 <img> 和文本就能混合，但错位、缩放跳动、语义混乱这三类问题几乎必现——关键不在“能不能”，而在“怎么控”。
为什么 <ol> 里的图片总和文字不对齐
根本原因是 <img> 默认 vertical-align: baseline，而 <li> 的行高和编号基线不一致；加上列表项自带的 padding-left 和编号缩进，图片一没设高宽，文字就上蹿下跳。
- 别依赖浏览器默认对齐，
<li>不是 flex 容器，align-items无效 - 删掉所有
float：它会让编号错位，且父<ol>高度塌陷 -
line-height设太高会撑开整个<li>，哪怕图片只占一行 - 最简验证法：把图片旁文字全删掉，只留
<img>，看是否垂直居中；再加一个字母，观察偏移量
<ol> 中图文混排的两种稳态写法
不是所有场景都要 flex，尤其当图片只是小图标或装饰性前缀时，轻量方案更可靠：
-
纯 inline 混排（推荐用于图标+短文本）：
<li><img src="check.png" alt="完成" style="vertical-align: middle; height: 16px;"> 任务已提交</li>—— 固定高度 +vertical-align: middle对齐最稳，不破流，兼容 IE9+ -
flex 嵌套（适合图文比例不一、需间距控制）：
<li style="display: flex; align-items: center; gap: 8px;"><img src="avatar.jpg">张三已确认</li>—— 注意gap在 IE11 不支持，得换margin-right
图片加载失败时列表结构崩了怎么办
<img> 加载失败不占位，会导致 <li> 高度塌陷、编号错位、后续项上移——这不是 bug，是未设尺寸的必然结果。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
width和height（哪怕只是占位值），例如<img width="20" height="20"> - 避免只设
max-width: 100%：它不提供初始占位，加载前 DOM 高度为 0 - 若用
aspect-ratio，确保目标浏览器支持（Chrome 88+、Firefox 89+、Safari 15.4+） - 图标类图片建议用 SVG 内联，天然抗缩放、无加载失败风险，且可直接用 CSS 控制颜色和大小
什么时候该放弃 <ol> 改用其他结构
有序列表的核心语义是「有顺序的步骤/计数」，一旦图文内容复杂到需要悬停、点击、响应式断点或跨设备适配，<ol> 就成了负担。
- 带操作按钮的步骤项（如“编辑”“删除”图标）→ 改用
<div role="list">+aria-ordinal手动维护序号 - 图片尺寸差异大（头像 vs 截图）、文字长度波动剧烈 → 用
display: grid控制行列，序号改用伪元素::before生成 - 需要 SEO 或读屏器识别每张图的含义 → 别硬塞进
<li>，改用<figure>包裹图片+<figcaption>，再把整个<figure>当作<li>子元素
真正难的不是让图片出现在列表里，而是让编号、图片、文字三者在加载、缩放、屏幕阅读器、打印样式等所有上下文中保持逻辑一致——多数崩坏，都始于忘了给 <img> 设 height。
