最稳的横向列表用 inline-block，重置 li 为 inline-block 并清除 ul 默认样式；响应式场景优选 flex，用 gap 控制间距、flex-wrap 换行；避免 float；链接需设 display: block + padding 确保点击区域。
用 display: inline-block 实现最稳的横向列表
这是兼容性最好、行为最可控的方式，尤其适合需要保留默认 <li> 语义又不想写额外标签的场景。
关键不是改 <ul></ul>，而是重置 <li> 的默认块级行为：
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin-right: 12px; /* 用 margin 控制间距，比空格可靠 */
}
注意点：
- 必须清除
<ul></ul>默认的padding-left和margin，否则左侧会留白 -
inline-block元素间的换行符会被渲染成空格，导致意外间隙 —— 解决办法是让<li>标签紧挨着写，或在父容器上设font-size: 0（再给li单独设字体大小） - IE8+ 完全支持，无兼容风险
用 flex 布局做响应式横向列表
当需要等宽分布、自动换行、对齐控制（比如居中、右对齐）时，flex 是更现代也更干净的选择。
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 16px; /* 推荐用 gap，不用 margin，避免首尾多出空白 */
}
li {
flex: 0 0 auto; /* 防止内容过长时被压缩 */
}
常见误操作：
- 只写
display: flex却没清list-style和padding，结果列表前仍有圆点和缩进 - 忘记设
flex-wrap: wrap，导致小屏幕下溢出而不是换行 - 用
justify-content: space-between但只有两个li，结果左右撑满、中间空太大 —— 此时改用space-around或手动加gap更可控
别碰 float: left —— 过时且容易翻车
虽然老教程里常见，但现在用它做横向列表纯属自找麻烦。
典型问题包括：
- 父
<ul></ul>高度塌陷，必须额外触发 BFC（比如加overflow: hidden），但可能影响子元素定位或滚动 - 浮动元素脱离文档流，后续兄弟元素会上移，布局逻辑变脆弱
- 清除浮动的写法五花八门（
::after、clear: both），稍不注意就漏掉，调试成本高 - Flex 和 Grid 已覆盖所有主流浏览器多年，没必要为兼容 IE7/8 牺牲可维护性
横向列表里的链接点击区域太小？加 padding 别只加 margin
很多人只给 a 标签设 margin 拉开距离，但点击热区仍只有文字大小 —— 手指或鼠标容易点空。
正确做法是把 padding 加在 a 上，并确保它能撑开整个 li：
li a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
如果用了 inline-block 方案，a 必须设 display: block 或 inline-block 才能生效；如果用了 flex，a 默认就能填满 li 高度，但 padding 依然要显式加。
移动端尤其要注意：至少保证点击区域 ≥ 44×44px，否则 iOS Safari 会忽略点击。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
