From 2dfecef116f990a32b6f1f6bdfe8f7224846a957 Mon Sep 17 00:00:00 2001 From: laoyang Date: Mon, 28 Sep 2026 21:30:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?= =?UTF-8?q?=E7=AB=99=E7=82=B9=E6=A0=BC=E5=B8=83=E5=B1=80=E5=A1=8C=E9=99=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 根因：百分比宽度写在 flex item 内部的 上，而 li 自身没有宽度， a 的 25% 无法解析、li 的宽又由内容 a 反推，循环依赖下浏览器把格子 塌成 min-content（实测约 12px）—— 42px 图标撑破格子、站点名被裁到 只剩几像素，整页错位。 修法：width:25% + margin:0 写在 li.site 自身，内部 a 改 width:100%； margin 归零可避免 4 x (25% + 左右 margin) 超出一行宽、把第 4 个挤到 下一行。 验证：Playwright 真机宽度 360/375/390/414 直连线上全部通过 （格子 76~90px、名称 scrollWidth==clientWidth、无横向溢出）； 桌面 768/1280/1920 零回归。 --- assets/css/style.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/assets/css/style.css b/assets/css/style.css index 06faa3d..a825937 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -190,7 +190,13 @@ a { text-decoration: none; color: inherit; } #search-text { height: 50px; line-height: 50px; font-size: 15px; text-indent: 18px; } #word { top: 58px; } .mylist { border-radius: 14px; padding: 12px 12px 10px; } - .mylist li.site a { width: 25%; padding: 10px 2px 8px; } + /* ⚠️ 百分比宽度必须写在 **flex item（li）自身**，不能写在它内部的 上： + li 自己没有宽度，a 的 25% 要相对 li 解析、而 li 的宽又由内容 a 反推 —— + 循环依赖浏览器解析不了，会塌成 min-content（实测约 12px）， + 于是 42px 图标撑破格子、名称被裁到只剩几像素（2026-09-28 手机端实测）。 + margin 也要归零：4 × (25% + 左右 margin) 会超出一行宽，把第 4 个挤到下一行。 */ + .mylist li.site { width: 25%; margin: 0; } + .mylist li.site a { width: 100%; padding: 10px 2px 8px; } .mylist li.site .icon, .mylist li.site .ico-letter { width: 42px; height: 42px; } .mylist li.site .name { font-size: 12px; } }