ul横排应设li为flex或inline-block；推荐ul设display:flex、list-style:none、无边距，li设margin；inline-block间隙由空白符引起，可用font-size:0解决；小屏横滚需外层div加overflow-x:auto并处理滚动条。
ul 默认是垂直的，怎么让它横着排
浏览器对 ul 的默认样式就是块级+垂直列表，想横排得主动覆盖掉它的行为。最直接的办法是把 li 改成行内或弹性布局元素，而不是依赖 ul 本身。
- 别改
ul的display，改li—— 否则会破坏语义和可访问性 -
display: inline-block最兼容老浏览器，但要注意li间有空格会留缝隙 -
display: flex在ul上设更干净，但 IE10 以下不支持 - 用
float: left能横排，但要清浮动，现在基本不推荐了
flex 布局下 ul 横排的写法和坑
给 ul 加 display: flex 是目前最主流的做法，但几个参数容易配错。
-
flex-direction: row是默认值，不用显式写 - 必须加
list-style: none，否则圆点/数字还在左边挤着 -
margin和padding别漏掉，ul默认有缩进，会偏移整体位置 - 如果
li内容超长换行，加white-space: nowrap控制单行显示
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-right: 1rem;
}
inline-block 方式为什么总有多余间隙
这是 HTML 解析时把换行和空格当成文本节点导致的，不是 CSS bug，但特别容易被当成“样式没生效”。
- 间隙大小约
4px，和父容器字体大小相关 - 解决方法之一：把
ul的font-size: 0，再单独给li设字体大小 - 方法之二：删掉 HTML 中
li标签之间的换行和空格（可读性差，不推荐） - 方法之三：用
margin-left: -4px往回拉，但不同环境间隙可能不一致
移动端适配时 ul 横向滚动怎么做
横向菜单在小屏上内容多时，需要允许用户滑动查看，但默认不会触发横向滚动条。
- 给
ul包一层div，设overflow-x: auto和white-space: nowrap -
ul本身设display: inline-block或display: flex，避免换行 - iOS Safari 需要加
-webkit-overflow-scrolling: touch才有惯性滚动 - 别忘了隐藏滚动条：用
::-webkit-scrollbar { display: none; }，但保留功能
横向排列本身不难，难的是在不同设备、不同内容长度、不同浏览器里保持表现一致。特别是间隙控制和滚动体验，往往要反复调几次才能刚好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
