根本原因是img默认vertical-align: baseline，对齐文字基线而非视觉中线；文字有降部（如g、y），图标底部卡在基线上致“下沉”，Flexbox设父容器display: flex并align-items: center可彻底解决。

为什么无序列表里的小图标总和文字错位

根本不是图片尺寸没调好，而是 <img alt="HTML怎么设置无序列表中的小图片自适应对齐" > 默认 vertical-align: baseline，它对齐的是文字基线，不是视觉中线。文字有降部（比如 g、y 的尾巴），图片底部却卡在基线上，结果看起来“图标沉下去了”。inline-block 也救不了——它放大了 line-height 和 font-size 的干扰，margin 往上拉只是碰运气。

用 Flexbox 替代 inline-block 是最稳解法

把 <ul></ul> 设为弹性容器，对齐逻辑就从“猜基线”变成“明确居中”。关键点不在图片上加样式，而在父容器行为统一：

• .nav-list { display: flex; align-items: center; justify-content: flex-end; list-style-type: none; }
• .nav-list li { margin-left: 6px; } —— 间距由 li 控制，不靠 img 的 margin
• .nav-list img { width: 18px; height: auto; } —— 不写 vertical-align 也行，Flex 已接管对齐
• 确保时间文本也包在 <li> 里，别裸写在 <ul></ul> 下，否则破坏 flex 子项结构

响应式下图标对齐失效的常见诱因

加了 Flex 还是不对齐？大概率是父容器被其他规则悄悄接管了布局上下文：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 外层 <div> 用了 <code>float 或 position: absolute，让 <ul></ul> 脱离文档流
• <ul></ul> 的父级设了 display: grid 或 display: table，flex 行为被覆盖
• 全局 CSS（比如 Bootstrap）重置了 ul 的 padding 或 margin，导致 justify-content 参照错位
• 媒体查询里只改了 text-align，但没同步更新 justify-content，断点切换后 flex 对齐失效

小图标自适应宽度时别踩 max-width 冲突坑

想让图标在小屏自动缩放？别直接给 img 加 max-width: 100%：

立即学习“前端免费学习笔记（深入）”；

• 如果父 <li> 没设宽度，100% 就没参照，图标仍按原始像素渲染
• Flex 容器默认 min-width: auto，会锁住图标最小宽度，max-width 形同虚设
• 真正可控的做法：给 img 加 min-width: 0，再配合 width: 100% 或 flex: 0 0 auto
• 若图标来自 SVG，优先用 width + height: auto，避免 raster 图片缩放模糊
实际生效的关键往往藏在父容器的 display 类型和是否被浮动/定位干扰——很多“对齐失败”不是代码漏写了什么，而是某一层祖先元素悄悄改写了整个布局上下文。