双行横向导航必须用flex或grid实现自动换行，而非float或inline-block；推荐flex-wrap: wrap配合媒体查询限制最多两行，或grid-template-rows: repeat(2, auto)用于固定项数的精准布局。
双行横向导航不能靠 float 或单纯 display: inline-block 硬塞，必须用 flex 或 grid 控制换行逻辑，否则小屏下文字折行错位、点击区域塌陷、hover 错位都是常态。
用 flex-wrap: wrap 实现可控双行
这是最直接、兼容性最好（IE10+）的方案。关键不是“让它显示两行”，而是“让它在宽度不足时自动折成两行”，再用媒体查询锁定最大行数为 2。
-
nav ul设display: flex+flex-wrap: wrap，子项li不设float，也不写width - 每项
li a加flex: 0 0 auto防止被压缩变形；若需等宽，改用flex: 1并配合min-width - 加
max-height和overflow: hidden到容器上，配合@media限制最多两行：比如@media (max-width: 768px) { nav ul { max-height: 80px; } }（假设单行高 40px） - 常见错误：漏掉
box-sizing: border-box，导致 padding 把行高撑爆；或给li设margin-bottom却没清浮动，第二行整体下移
grid-template-rows: repeat(2, auto) 强制双行布局
适合固定项数（如 6 个菜单项，明确分 2×3）、且需要像素级对齐的后台导航。Grid 能真正“钉住”行高，不会因内容长短波动。
- 外层
nav ul设display: grid，用grid-template-rows: repeat(2, auto)固定两行 - 列数用
grid-template-columns: repeat(3, 1fr)（对应 6 项），或repeat(auto-fit, minmax(120px, 1fr)))动态适配 - 必须为每个
li显式指定grid-column/grid-row，例如第 4 项写grid-column: 1; grid-row: 2;，否则浏览器按源顺序自动填，可能第一行只填 2 个就跳第二行 - 性能注意：若菜单项含图标+文字+徽标，别在
li里嵌套多层div，加contain: layout style paint防止重排重绘扩散
响应式断点怎么设才不翻车？
别抄 Bootstrap 的 sm: 576px。真实移动端 viewport 宽度集中在 360–414px（iPhone SE / 多数安卓小屏），双行导航在 480px 下已开始拥挤，640px 才勉强宽松。
立即学习“前端免费学习笔记（深入）”；
- 推荐三档断点：
@media (max-width: 480px)→ 单列垂直菜单（flex-direction: column）；@media (min-width: 481px) and (max-width: 768px)→ 双行横向；@media (min-width: 769px)→ 单行横向 - 测试时用真机或 Chrome DevTools 的 “Device Toolbar” 模拟 iPhone 12 mini（390px），看第二行文字是否被截断、
padding是否挤压图标 - 绝对不要用
height: 80px锁死容器高度——字体缩放、系统字号设置会直接撑破，改用max-height+line-clamp（仅现代浏览器）或 JS 动态计算
双行导航最难的不是实现，是让第二行和第一行在视觉重量、hover 区域、焦点顺序上完全一致。很多人加了 flex-wrap 就以为完事，结果测试时发现键盘 Tab 到第 4 项时焦点跳到页面底部——因为第二行 li 在 DOM 顺序里还是紧跟第 3 项后面，但视觉位置已偏移。这时候得靠 order 属性或重新组织 HTML 结构来对齐语义流和视觉流。
