laoyang/SimpleNav
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复手机端站点格布局塌陷

Browse Source 
根因：百分比宽度写在 flex item 内部的 <a> 上，而 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 零回归。
This commit is contained in:
laoyang
2026-09-28 21:30:41 +08:00
parent 257c38e16a
commit 2dfecef116
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+7 -1
View File
@@ -190,7 +190,13 @@ a { text-decoration: none; color: inherit; }
#search-text { height: 50px; line-height: 50px; font-size: 15px; text-indent: 18px; } #search-text { height: 50px; line-height: 50px; font-size: 15px; text-indent: 18px; }
#word { top: 58px; } #word { top: 58px; }
.mylist { border-radius: 14px; padding: 12px 12px 10px; } .mylist { border-radius: 14px; padding: 12px 12px 10px; }
.mylist li.site a { width: 25%; padding: 10px 2px 8px; } /* ⚠️ 百分比宽度必须写在 **flex item（li）自身**，不能写在它内部的 <a> 上：
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 .icon, .mylist li.site .ico-letter { width: 42px; height: 42px; }
.mylist li.site .name { font-size: 12px; } .mylist li.site .name { font-size: 12px; }
} }