现代横向菜单最干净写法是ul设display: flex，需清除默认样式、用gap控制间距、加white-space: nowrap防换行；inline-block间隙源于换行符渲染，推荐font-size: 0修复；float已过时，响应式滚动需外层div包住并设overflow-x: auto。
ul设display: flex是最干净的横向菜单写法
现代项目直接在ul上加display: flex，比float或inline-block少踩一半坑。关键不是“能不能横”，而是横完之后是否可控、可维护、能响应。
必须同步处理三件事：
— 清掉ul默认的list-style、padding和margin，否则圆点还在、左侧缩进没消失；
— 给li加margin-right或用gap控制间距（gap更稳，但IE不支持）；
— 如果菜单项文字过长，默认会换行，加white-space: nowrap保单行显示。
- IE10–IE11 需补
display: -ms-flexbox前缀 -
flex-wrap: wrap不是默认行为，小屏内容溢出时得手动加，否则直接撑破容器 - 别用
justify-content: space-between配动态数量的菜单项——两个li时左右撑满，三个就错位，不如统一用gap
inline-block方式为什么总多出4px间隙
这不是CSS bug，是HTML解析把换行符当空格渲染了。间隙大小约等于父容器font-size的0.25倍，所以默认16px字体下就是4px。
修复方法有三个，按推荐顺序：
— 把ul的font-size: 0，再单独给li设回需要的字号；
— 在HTML里让li标签紧挨着写，不留换行和空格（可读性差，调试时容易漏）；
— 用margin-left: -4px硬拉，但不同环境间隙可能浮动，不推荐。
-
vertical-align: top建议加上，避免inline-block元素因基线对齐错位 - IE8+完全支持，兼容性比flex好，但响应式控制弱
-
a标签必须设display: block，否则点击热区只有文字，不是整个菜单项
float:left现在基本不该用了
它会让ul高度塌陷，必须额外触发BFC（比如加overflow: hidden），但这个操作可能影响子元素定位或滚动表现。
更麻烦的是浮动脱离文档流，后续兄弟元素会上移，布局逻辑变脆弱。老教程里常见，但现在纯属自找麻烦。
- 清除浮动的
clear: both要插在ul末尾，或用伪类::after，代码量反而比flex多 - 响应式切换方向（比如移动端转垂直）几乎没法只靠CSS完成，得配合JS
- 如果父容器本身有
position: relative，浮动后定位关系会变混乱，排查成本高
移动端横向滚动菜单怎么加滚动条
横向菜单内容多时，小屏不能换行就得允许滑动。但ul默认不会出现横向滚动条，得包一层div并设overflow-x: auto。
关键细节：
— ul本身要设display: inline-block或display: flex，防止内部换行；
— iOS Safari 必须加-webkit-overflow-scrolling: touch才有惯性滚动；
— 隐藏滚动条用::-webkit-scrollbar { display: none; }，但功能保留。
- 别忘了
white-space: nowrap，否则文字先折行再滚动，体验断层 - 安卓部分浏览器对
overflow-x支持不稳定，建议加min-width: max-content兜底 - 滚动区域宽度受父容器限制，如果外层
div没设width或max-width，可能意外撑宽整页
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
