最稳妥方式是每个列表项单独设display: flex; align-items: center，图标与文字同级、不嵌套，配gap或margin-left控制间距，语义清晰且响应友好。
用 display: flex 实现图标+文字左对齐布局
最稳妥、语义清晰且响应友好的方式是用 flex 布局，每个列表项单独包裹图标和文字。不要用 float 或绝对定位——容易错位、换行异常、或与父容器冲突。
常见错误：把图标塞进 <li> 里但没设 display: flex，结果图标和文字堆成一行却无法垂直居中；或者给整个 <ul> 加 flex，导致所有 <li> 横向排列（变成横向菜单）。
- 每个
<li>内部用display: flex; align-items: center; - 图标建议用
<svg>或<i>（如 Font Awesome），设固定宽高（如width: 16px; height: 16px;），避免撑开布局 - 文字部分加
margin-left: 8px;保持间距，别依赖空格或 - 若需点击区域扩大，给整个
<li>设cursor: pointer;和padding，而不是只给文字加样式
用 background-image 实现纯 CSS 图标（无额外标签）
适合图标统一、无需交互、且不想多写 HTML 标签的场景。但要注意：图标无法单独选中、不能响应 hover 变色、也不易适配深色模式。
典型报错：background-position 值写错导致图标偏移，或忘了设 background-repeat: no-repeat 出现重复图标。
立即学习“前端免费学习笔记（深入）”；
- 在
<li>上设background-image: url(./icon-home.svg); - 必须配
background-size: 16px 16px;和background-position: left center; - 留出左侧空间：用
padding-left: 24px;（图标宽 + 间距） - 慎用 base64 图标——会增大 CSS 体积，且难维护
用 grid 做等宽图标列（适合多列对齐）
当需要多个列表项横向对齐、图标宽度一致（比如设置页的选项卡），grid 比 flex 更易控制列宽和间隙。
容易踩坑：给 <ul> 设 display: grid 后，<li> 默认占满整行；或忘记用 grid-template-columns: auto 1fr; 导致文字换行异常。
-
<ul>设display: grid; grid-template-columns: 20px 1fr; - 每个
<li>内部用display: contents;（让其不参与布局，由子元素直接入格） - 图标放第一个子元素，文字放第二个，顺序即列顺序
- 不推荐在移动端小屏用此法——
20px列太窄，图标会被压缩
兼容性与可访问性关键点
图标不是装饰就是内容。如果图标有含义（如“删除”“设置”），就必须提供替代文本，否则屏幕阅读器会跳过或读成“空白”。
很多人只加了 aria-hidden="true" 却忘了给文字加 aria-label，结果语音朗读时只读出“设置”，没说明是“打开设置”还是“保存设置”。
- 纯装饰图标：用
<span aria-hidden="true"></span>包裹，且不带role - 有意义图标：用
<svg aria-label="删除文件">，并删掉title元素（部分旧屏幕阅读器会重复读） - 避免只靠颜色区分状态——比如“红色图标=警告”，需搭配文字或图标形状变化
- 测试键盘 Tab 是否能聚焦到整个列表项，而非仅文字部分
flex 方案覆盖 90% 场景；background-image 适合静态配置页；grid 仅在强对齐需求下才值得引入。图标尺寸、间距、语义缺一不可，别为了少写两行 HTML 而牺牲可访问性。 
