html列表使用图片

有序列表（<ol>）中使用图片

“` | 有序列表逻辑与无序列表一致，可额外通过`style`调整图片垂直对齐方式（如`middle`）。 |

嵌套列表中的图片

• 主项目1
  1. 子项目1
  2. 子项目2

“` | 在嵌套的二级列表（`

`或`
`）中同样可直接插入图片。 |

注意事项

项目	说明
路径问题	若图片与HTML文件不在同一目录，需使用相对路径（如../images/pic.jpg）或绝对路径。
响应式适配	建议用CSS控制图片大小（如max-width: 100%），避免固定width/height导致移动端显示异常。
替代文本	alt属性必须填写，用于图片加载失败时显示，并提升无障碍访问体验。

---

问题与解答

问题1：图片在列表中显示不全怎么办？

解答：
检查是否设置了固定的width/height属性，尝试改用百分比或CSS样式（如width: 80%），若父元素有宽度限制，需调整列表或图片的盒模型（如padding、margin）。

问题2：如何让图片与文字垂直居中对齐？

解答：

1. 使用style="vertical-align: middle;"直接作用于<img>标签。
2. 或通过CSS统一设置：

   li img {
     vertical-align: middle;