Flexbox导航栏需设display: flex和flex-wrap: nowrap子项用flex: 1均分或flex: 0 1 auto保自然宽注意box-sizing、hover预占位、伪元素滑入、可访问性及IE11兼容写法。Flexbox布局让导航栏自动均分宽度用 display: flex 是最直接的解法但很多人卡在子项不等宽或换行错乱上。关键不是加了 flex 就完事得控制主轴分配和收缩行为。父容器必须设 display: flex且推荐加 flex-wrap: nowrap 防意外折行导航项a 或 li要加 flex: 1 实现均分如果想保留文字自然宽度改用 flex: 0 1 auto别漏掉 box-sizing: border-box否则 padding 会撑出滚动条或溢出移动端要注意均分在小屏下可能文字挤成一团建议配合 min-width: 0 overflow: hidden text-overflow: ellipsis:hover伪类触发下划线动画但不跳动常见错误是直接给 a:hover 加 border-bottom结果文字突然上移——因为边框占用了新空间。真正稳的方案是预占位过渡。基础项统一设 border-bottom: 2px solid transparenthover 时只改颜色不改变尺寸动画用 transition: border-color 0.3s ease别写成 all否则字体粗细变化也会被过渡显得拖沓若需“从左到右”滑入效果得用 ::after 伪元素 transform: scaleX(0) → scaleX(1)且必须设 transform-origin: left注意 Safari 对 transform 在 inline 元素上的兼容性a 标签建议加 display: inline-block响应式断点下菜单收为汉堡按钮但保持语义结构纯 CSS 实现折叠菜单时最常踩的坑是用 display: none 直接隐藏导航项——这会让屏幕阅读器也跳过还破坏键盘 Tab 顺序。 Trenz AI驱动的社交电商营销平台专为TikTok Shop设计