引用来源列表 · 排版方案对比

推荐方案 · 序号统辖整块

序号独占左栏，标题 + 网址作为一个内容组缩进在右侧 —— 序号的层级高于两者，而不是和标题平级。favicon 行内跟在网址前面，无边框、14×14 配 13px 网址。

References

方案 A · 目标排版（推荐）

序号、favicon、标题都是行内元素，同一行。序号和 favicon 是同规格的一对方框（18×18 / 1px 边框 / 圆角 5px）。纯行内流，标题换行后续行和网址都顶到最左。

References

方框风格 · 三选一

序号和 favicon 始终成对同步。三种都保持 18×18 同尺寸。

① 描边（当前默认）

② 浅底无边框

③ 圆形描边

方案 B · 网址悬挂缩进（对照）

第一行相同，网址和标题续行缩进到标题起点。层级更清楚，代价是长网址可用宽度变窄。

References

方案 C · 单行紧凑

标题和域名压到同一行，只在标题很长时才折行，折行同样顶到最左。

References

方案 D · favicon 跟着网址走

第一行只有「序号 + 标题」，favicon 移到第二行网址前面：行内、去掉边框、缩到 14×14 去配 13px 的网址字号。两行都顶到最左，favicon 和序号形成同一条左边界。

References

对比 · 现状复刻

序号绝对定位在最左、favicon 无框跟着网址走。三条左边界，且带框的序号（22×17）比裸 favicon（16×16）大一圈 —— 这就是“歪”和“不协调”的来源。

References

对齐的坑：img 是替换元素，基线 = 盒子底边；span（inline-block）的基线 = 内部文字基线，在盒子里往下约 13px。同一个 vertical-align:-4px 落在两个参照点上，favicon 就会一直偏高。给 .num 加 overflow:hidden 后，inline-block 的基线改取盒子底边，两者才真正同基准。
序号宽度锁死 18px（不用 min-width），否则 12 比 1 宽，后面 favicon 的左边缘会逐行错开。代价：序号 ≥100 会被 overflow:hidden 裁掉，需要把 .num 宽度放到 22px。
favicon 靠 box-sizing:border-box + padding:2px + object-fit:contain 缩进框内，不用额外包 span。vertical-align 手调比 flex align-items:center 更稳：标题折行时 chip 仍对齐第一行，不会跑到整块垂直中心。