white-space: nowrap 无效常见因父容器未设 overflow-x: auto 或子元素为 display: block；需父设 nowrap、子用 inline-block 或 flex，注意 iOS 滚动卡顿及 inline-block 间隙问题。
white-space: nowrap 为什么加了没反应
常见错误是父容器没设 overflow-x: auto，或者子元素用了 display: block 导致换行失效。white-space 只对 inline 或 inline-block 元素起作用，block 元素无视它。
- 必须给父容器设
white-space: nowrap，同时子元素用display: inline-block（不能用 flex 或 grid） - 父容器要加
overflow-x: auto，否则滚动条不出现，内容直接溢出不可见 - 子元素别设
width: 100%或flex: 1，会撑满父宽、失去横向排列基础 - 移动端要注意
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿
inline-block 子项之间有缝隙怎么消除
这是 HTML 解析空白符导致的，默认把换行/空格渲染成一个空格字符，宽度约 4px。不是 margin，没法用 margin: 0 清掉。
- 父容器设
font-size: 0，子元素再单独设font-size（比如font-size: 14px） - 或子元素用
float: left+ 父容器overflow: hidden（但会脱离文档流，慎用于复杂布局） - 避免在 HTML 中写换行缩进，把所有
<div> 标签连写：<code><div></div> <div></div> - 不用 inline-block？改用
display: flex+flex-wrap: nowrap更稳，但注意 Safari 旧版本对scroll-snap-align支持差 - 必须确保目标元素在「可滚动容器」内，且该容器是调用
scrollIntoView的parentElement的直接滚动上下文 - 显式传参：
el.scrollIntoView({ inline: 'start', behavior: 'smooth' })，inline控制水平对齐方式 - 如果父容器用了
overflow-x: auto但没设overflow-y: hidden，部分浏览器会触发双轴滚动，干扰定位 - 首次调用前建议先
container.scrollLeft = 0重置，避免因缓存位置导致偏移计算错误 - 需要兼容 IE？用
container.scrollLeft = target.offsetLeft - container.offsetLeft手动算位置 - 大量子项（>100）时，别用 inline-block，改用虚拟滚动或
transform: translateX()配合事件节流 -
white-space: nowrap在长文本场景下可能引发内存占用飙升，尤其配合text-overflow: ellipsis时，WebKit 内核有重排 bug - 不要给滚动容器设
will-change: transform，除非真有频繁动画，否则反而触发强制图层合成，耗电增、滑动延迟
滚动后定位到某一项：scrollIntoView 不生效
直接调 element.scrollIntoView() 在横向滚动容器里常失败，因为默认行为是垂直对齐，且父容器没设 scroll-behavior: smooth 时跳转生硬。
兼容性与性能坑点
IE11 不支持 scrollIntoView({ inline: 'start' })，Safari 15.4 之前对 scroll-snap-type 的 y mandatory 有 bug，横向滚动列表一旦加了 snap 容易卡死。
立即学习“前端免费学习笔记（深入）”；
横向滚动列表看着简单，但 white-space、inline-block、scrollIntoView 三者交叠时，任意一个参数错位都会让定位漂移或滚动失效——尤其是 iOS 上那个看不见的 4px 缝隙和 scroll-snap 的隐式行为，最容易在联调阶段突然冒出来。
