将垂直菜单改为横向，核心是让li不换行：可用inline-block（需处理空白符间隙）、flex（推荐，干净可控）或float（不推荐，语义错位）；注意下拉定位、响应式切换及可访问性。
把 ul 垂直菜单改成横向，核心就改 display
垂直菜单默认是块级堆叠，横向只需让 li 元素不换行。最直接的做法是给 li 加 display: inline-block 或 display: flex ——但别急着套用，不同方式行为差异很大。
常见错误现象：li 之间莫名有空隙、最后一项掉到下一行、鼠标 hover 失效。
-
inline-block会把 HTML 中的换行和空格渲染成空白符，导致菜单项间出现不可控间隙；解决方法是删掉li标签间的换行，或给父级ul设font-size: 0（子元素再单独设字体） -
flex更干净：给ul设display: flex，li自动横向排列；注意默认flex-wrap: nowrap，内容超宽时会溢出而非折行 - 如果菜单有下拉项，
position: absolute的子菜单需确保父li是position: relative，否则定位错乱
用 float: left 还能用吗？
能，但不推荐。老项目里还能见到，原理是让每个 li 左浮动，父 ul 需加 overflow: hidden 或伪元素清除浮动，否则高度塌陷——这容易引发布局连锁问题，比如后续元素上移、margin 不生效。
现代浏览器下，float 已不是布局首选；它本意是文字环绕图片，强行用于导航菜单反而增加维护成本。
立即学习“前端免费学习笔记（深入）”；
- 兼容性没问题（IE6+ 都支持），但语义错位，CSS 逻辑变绕
- 响应式时难以控制换行行为，
flex的flex-wrap或grid的自动折行更直观 - 若必须用，记得给
ul加zoom: 1（IE6/7 触发 hasLayout）
横向菜单宽度不够时，内容被截断怎么办
这是 white-space: nowrap 和容器宽度共同导致的，默认情况下文字不会折行，超宽就溢出或隐藏。关键看你要的是滚动、省略还是自适应。
- 想保持单行 + 省略号：给
a或li加white-space: nowrap; overflow: hidden; text-overflow: ellipsis，同时必须设width或max-width - 想允许折行：去掉
white-space: nowrap，并确保li宽度不固定（如用flex: 1或width: auto） - 想水平滚动：给
ul包一层div，设overflow-x: auto; white-space: nowrap，内部li保持inline-block
移动端适配时横向菜单突然错乱
横向菜单在小屏上大概率会挤成一团甚至换行错位，这不是 bug，是 CSS 布局对视口变化的自然反应。别指望“一套代码通吃”，得主动干预。
- 用媒体查询在
max-width: 768px下切回垂直布局：ul { flex-direction: column; } - 避免固定像素宽度（如
width: 120px），改用flex: 1或百分比，让菜单项弹性分配空间 - 触摸设备上，
:hover不可靠，下拉菜单需额外绑定click或用@media (hover: hover)区分交互模式
横向菜单看着简单，真正难的是边界情况：超长文本、动态插入项、键盘焦点顺序、屏幕阅读器支持。这些往往被“快速转换”忽略，但上线后第一个被用户报出来。
