现代横向导航条应使用 display: flex 实现，它天然解决对齐、等宽、换行和响应式收缩问题，兼容主流浏览器；核心是设容器为 flex，子项自动横排，并重置默认样式。
横向导航条不是靠 float 或 display: inline-block 硬凑出来的，现代写法该用 display: flex —— 它天然解决对齐、等宽、换行控制和响应式收缩问题，且兼容性已覆盖所有主流浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 全版本）。
用 flex 布局实现基础横向导航
核心是把 <nav></nav> 或 <ul></ul> 设为 display: flex，子项自动横排。别忘了重置默认样式：
nav {
display: flex;
}
nav a {
text-decoration: none;
padding: 12px 24px;
color: #333;
}
/* 移除 ul 默认的 list-style 和 margin/padding */
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin: 0;
}- 不用
float: left—— 它会脱离文档流，父容器高度塌陷，还得清浮动 - 避免
inline-block—— 字符间空格会变成像素级间隙，得设font-size: 0或注释删空格，不直观 -
flex下子元素默认flex-shrink: 1，窄屏时文字可能被压缩变形，后面会讲怎么关掉
处理超长文字或过多菜单项的溢出
当菜单项太多或文字太长，flex 默认会挤压内容，导致文字折行或截断。关键在控制收缩行为：
- 加
white-space: nowrap防止文字换行 - 设
flex-shrink: 0禁止菜单项被压缩（否则小屏下“关于我们”可能缩成“关于…”） - 给容器加
overflow-x: auto+scrollbar-width: none（Firefox）和::-webkit-scrollbar隐藏滚动条，实现“可滑动但不显眼”
示例片段：
立即学习“前端免费学习笔记（深入）”；
nav ul {
display: flex;
overflow-x: auto;
}
nav li {
flex-shrink: 0;
white-space: nowrap;
}
/* 隐藏滚动条（视觉上） */
nav ul::-webkit-scrollbar {
display: none;
}
nav ul {
-ms-overflow-style: none;
scrollbar-width: none;
}适配移动端：折叠还是滚动？
纯响应式折叠（如 hamburger 菜单）需要 JS 控制类名，但很多内部系统或后台页面只需横向滚动即可。这时候要避开两个坑：
- 别在
@media里把flex改成block—— 这会让导航突然竖排，破坏预期 - 别给
nav加width: 100vw—— 它会强制撑满视口，但滚动容器需留出滚动空间，应设max-width: 100%并配合overflow-x: auto - 移动端 touch 滚动要加
-webkit-overflow-scrolling: touch（iOS Safari 旧版），否则滑动卡顿
真正麻烦的是带下拉二级菜单的横向导航——flex 本身不支持“悬停展开”，必须靠定位叠加，且焦点管理、键盘导航、移动端点击穿透都容易漏。这些不在“横向排列”范畴内，但实际项目里，它才是第一个卡住你的时间黑洞。
