ul默认垂直排列，需用CSS实现水平排列：推荐flex布局（ul设display: flex）或inline-block（li设display: inline-block），前者更现代且免空隙问题，后者需处理HTML空白符导致的间隙。
ul默认垂直排列，怎么让它水平排？
HTML5里ul默认是块级元素+列表项垂直堆叠，想横排得靠CSS干预，不是改HTML结构。核心就一条：让li不换行、并排站好。
最常用且兼容性稳的方法是给li加display: inline-block，或者用display: flex控制父容器ul。前者老项目兼容IE8+，后者更现代、布局可控性强。
-
display: inline-block要注意li之间有空格会留缝隙，解决办法是删HTML里li标签间的换行/空格，或设font-size: 0在ul上再重置子元素字体 -
display: flex直接写在ul上，li自动横向排列，无需额外处理空白符；但IE10以下不支持，需确认目标环境 - 别用
float: left——容易引发父容器塌陷，还得清浮，纯属增加维护成本
flex布局下ul横排的最小可靠写法
如果项目支持IE10+，flex是最干净的选择。只需三行CSS，不用碰HTML结构：
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-right: 1rem; /* 间距用margin控制，比padding更灵活 */
}
li:last-child {
margin-right: 0;
}注意list-style: none必须加，否则圆点或数字会和文字挤在一起；padding/margin清零避免浏览器默认样式干扰。
立即学习“前端免费学习笔记（深入）”；
inline-block方式下为什么li之间总有缝隙？
这是HTML解析器把换行符和空格当作文本节点渲染的结果，不是CSS bug。比如下面这段代码：
- 首页
- 关于
- 联系
两个li标签之间的换行+缩进会被当成一个空格字符，显示为约4px间隙。解决方法有三个：
- 删掉HTML中
li标签间的所有空白（难维护，不推荐） - 给
ul设font-size: 0，再给li单独设font-size: 16px（简单有效） - 用注释
把换行“堵住”，例如- 首页
- 关于
响应式场景下横排菜单怎么断行？
横排菜单在小屏上撑出滚动条或溢出，通常是因为没设换行策略。Flex方案下加一句flex-wrap: wrap就能让它自动折行：
ul {
display: flex;
flex-wrap: wrap;
}但要注意：一旦折行，justify-content对齐方式（如space-between）在多行时只作用于单行内部，不会跨行拉伸。如果需要整块居中或等分布局，得配合媒体查询+调整flex-direction或改用grid。
真正容易被忽略的是：横排菜单的可访问性。用flex或inline-block后，键盘Tab顺序仍是按HTML源码顺序，这点没问题；但若用float或绝对定位强行改变视觉顺序，就会破坏语义流——别为了视觉效果牺牲基础可用性。
