优先用 display: flex 在 ul 上实现 li 横向排列，简洁可控且响应友好；避免 float（需清浮动）和 inline-block（受空白符干扰）；需重置 list-style、padding/margin，并为 li 添加 padding 保障点击区域。
li 默认是垂直排列，怎么让它横着排
因为 li 是块级元素（在 ul 或 ol 中默认表现为垂直堆叠），要横向排列，本质是改变其盒模型行为。最直接有效的方式是控制父容器（ul）或子项（li）的显示方式，而不是给 li 加 float 或强行设 display: inline——后者容易破坏语义和布局稳定性。
- 优先用
display: flex在ul上：简洁、可控、响应友好 - 避免用
float: left：需清除浮动，li高度不一致时易错位 - 慎用
display: inline或inline-block：会受空格/换行符影响，产生不可控间隙
用 flex 实现 li 横向排列的最小可行写法
只需两行 CSS，无需改 HTML 结构：
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li {
margin-right: 1rem; /* 可选：控制间距 */
}关键点：
-
display: flex必须加在ul（父容器）上，不是li -
list-style: none和padding/margin: 0是为了消除浏览器默认样式干扰 - 若需末项无右距，可用
li:not(:last-child)限定margin-right - 加
flex-wrap: wrap可让超宽时自动换行，否则默认单行溢出
横向排列后点击区域变小？检查 line-height 和 padding
Flex 布局下，li 默认按内容高度收缩，如果文字没撑开、又没设 padding 或 min-height，点击热区会非常窄，尤其在移动端容易误触失败。
立即学习“前端免费学习笔记（深入）”；
- 给
li显式加padding: 0.5rem 1rem最稳妥 - 避免只靠
line-height垂直居中：它不增加可点击区域，只是视觉上拉高文字 - 如果内部有
a标签，记得把padding加在a上，并设display: block
IE10/11 下 flex 不生效？fallback 方案怎么写
IE10–11 对 flex 支持不完整（比如不支持 flex: 1 缩写、gap 完全无效），但基础横向排列仍可用。若必须兼容，可叠加旧式声明：
ul {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row;
flex-flow: row;
}注意：
- 不要依赖
gap，IE 不支持，改用margin控制li间距 - IE 下
justify-content的值如space-evenly无效，只能用space-between或space-around - 真要全面兼容老 IE，建议放弃 flex，改用
display: table-cell（但语义更弱，维护成本高）
横向排列本身不难，难的是在不同设备、不同内容长度、不同浏览器下保持间距一致、点击可靠、语义清晰。别省那几行 CSS，该加的 padding、该清的 list-style、该写的 fallback，漏一项就可能在某个场景里突然“不横了”。
