list-style:none仅隐藏项目符号，不影响布局；实现平铺需用display:flex作用于ul，并重置padding/margin、合理设置gap或flex属性等细节。
list-style:none 只是去掉符号，不解决平铺问题
很多人加了 list-style:none 就以为列表项会自动横排或填满容器，其实它只干一件事：隐藏项目符号（比如圆点、数字），对布局完全没影响。默认的 ul 或 ol 仍是块级垂直堆叠，li 仍是块级元素，彼此之间有默认上下 margin 和换行。
真正让“平铺”发生的是布局模型切换，不是样式修饰。
用 display:flex 让 li 横向平铺的正确写法
必须对 ul（或 ol）设 display:flex，而不是对 li 单独设——否则只是把每个 li 变成 flex 容器，毫无意义。
-
ul上加display:flex，li自动变成 flex item，横向排列 - 加
flex-wrap:wrap允许折行；不加则强制单行，可能溢出 - 用
gap控制间距比margin更干净，避免首尾多留白 - 如果要等宽平铺，给每个
li加flex:1，但注意内容长度差异大时会挤压文字
ul {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
li {
flex: 1;
}
为什么 ul 的 padding-left 会干扰平铺效果
浏览器默认给 ul 设了 padding-left: 40px（具体值因 UA 而异），这个内边距会撑开左侧空白，让 flex 容器看起来“没对齐”或“缩进”。不重置它，gap 和 justify-content 都可能表现异常。
- 必须显式写
padding: 0或padding-inline-start: 0 -
margin也建议清零，尤其旧版 Safari 对ul有默认 margin - 如果用了
reset.css或normalize.css，确认它是否覆盖了ul的 padding
flex 平铺在移动端容易塌陷的两个坑
小屏幕下，li 内容稍长或字体略大，就可能触发换行或宽度超限，导致视觉上“没平铺”。这不是 flex 失效，而是约束条件没配好。
-
white-space: nowrap加在li上可防文字折行，但需配合overflow:hidden和text-overflow:ellipsis避免溢出 - 别依赖
width: 25%这类固定值，flex 布局中应优先用flex-basis或flex缩放 - 某些安卓 WebView 对
gap支持差，可降级用margin-right+:last-child清除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
