本文介绍如何通过 css 实现列表（ul/li）在容器内水平滚动而非自动换行，解决因 flex-wrap: wrap 导致的布局错乱问题，同时提供可定制的滚动条样式。
本文介绍如何通过 css 实现列表（ul/li）在容器内水平滚动而非自动换行，解决因 flex-wrap: wrap 导致的布局错乱问题，同时提供可定制的滚动条样式。
在响应式网页开发中，当列表项内容较宽或数量较多时，开发者常期望它们横向排列并支持平滑滚动，而非强制换行（wrap）导致布局高度不可控或破坏卡片式设计。但若直接对 <ul></ul> 应用 display: flex + flex-wrap: wrap，反而会触发垂直堆叠，违背“单行水平浏览”的交互意图。
正确做法是禁用换行 + 启用水平溢出滚动。核心在于：
- 给
<ul></ul>设置white-space: nowrap，阻止子元素折行； - 配合
display: flex保持弹性布局能力； - 添加
overflow-x: auto和overflow-y: hidden，启用仅横向滚动； - 移除
flex-wrap: wrap（它在此场景下是干扰项）； - 为
<li>设置margin-right替代margin-bottom，确保水平间距统一。
以下是完整、开箱即用的 CSS 示例：
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
white-space: nowrap; /* 关键：禁止换行 */
overflow-x: auto; /* 启用横向滚动 */
overflow-y: hidden; /* 隐藏纵向滚动条，避免双滚动条 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
}
li {
background-color: #ffe8f9;
color: #000000;
padding: 10px 16px;
margin-right: 15px; /* 水平间距，替代 margin-bottom */
border-radius: 5px;
cursor: pointer;
flex-shrink: 0; /* 关键：防止 li 在滚动容器中被压缩 */
}
⚠️ 注意事项：
-
flex-shrink: 0是关键补充——若缺失，部分浏览器（尤其 Safari）可能压缩<li>宽度导致内容截断； - 若需隐藏滚动条轨道但保留功能，可将
::-webkit-scrollbar相关规则设为width: 0或opacity: 0（注意兼容性）； - 对于非 WebKit 浏览器（如 Firefox），需额外使用
scrollbar-width: none（仅支持auto/thin/none）或依赖 JS 方案增强兼容性； - 建议为
<ul></ul>设置固定高度或min-height，并配合padding优化触控区域。
最后附上配套 HTML 结构，确保语义清晰、无障碍友好：
- 列表项一：内容较宽时仍保持单行展示
- 列表项二：支持点击交互与悬停反馈
- 列表项三：适配移动端触摸滑动
- 列表项四：滚动条样式可自定义
该方案兼顾可访问性、跨浏览器兼容性与设计可控性，适用于标签导航、商品横向陈列、时间轴等典型场景。
