要让容器内元素横向排列并出现滚动条，必须同时设置white-space: nowrap、overflow-x: auto，并根据子元素类型调整display（如inline-block或flex）；仅overflow:auto无效，因默认换行或撑宽父容器。
要让容器内元素横向排列并出现滚动条，关键不是单纯加 overflow: auto，而是配合 white-space: nowrap 阻止换行，并确保子元素不被压缩或折行。
为什么只设 overflow:auto 不生效？
默认情况下，块级子元素会自动换行或撑宽父容器，浏览器不会触发横向滚动。必须打破“自动换行+自适应宽度”这个默认行为。
核心组合写法（必备三要素）
给父容器同时设置：
- white-space: nowrap：阻止内部文本和行内级元素换行
-
overflow-x: auto（或
overflow: auto）：仅在内容超宽时显示横向滚动条 -
display: inline-block 或 display: flex（可选但推荐）：避免子元素因块级特性独占一行导致布局异常；若子元素是
<span>、<a>等行内元素，white-space: nowrap就已足够
常见结构示例（带内联子项）
HTML：
立即学习“前端免费学习笔记（深入）”；
<div class="scroll-container"><span>标签1</span>
<span>标签2</span>
<span>标签3</span>
<span>标签很长很长</span>
</div>
CSS：
.scroll-container {white-space: nowrap;
overflow-x: auto;
padding: 8px 0;
}
.scroll-container span {
display: inline-block;
margin-right: 12px;
padding: 4px 12px;
background: #f0f0f0;
border-radius: 4px;
}
注意点与避坑提醒
- 如果子元素是
<div>，默认为块级，white-space: nowrap对它无效——需改为display: inline-block或display: inline-flex - 避免给父容器设
width: 100%同时又没限制最大宽度，否则可能无法触发滚动（尤其在弹性布局中） - 移动端要注意
overflow: auto在 iOS Safari 中默认不支持手指拖拽滚动，需加-webkit-overflow-scrolling: touch（仅旧版 iOS 需要） - 如需隐藏纵向滚动条，用
overflow-y: hidden单独控制
