CSS横向滚动失效：宽度150px的div无法横向滚动如何解决？

要让宽度150px的div实现横向滚动，同时内部inline-block类型的span保持在同一行显示，只需修改两处关键CSS设置：

• 修正overflow-x的拼写错误（你代码里写了s croll，多了空格，正确值是scroll）
• 给div添加white-space: nowrap;，强制内部行内元素不自动换行

修正后的完整代码 #

CSS代码

span {
  display: inline-block;
  /* 可选：调整span之间的间距，优化视觉效果 */
  margin-right: 10px;
}

div {
  display: block;
  width: 150px;
  border: 2px solid green;
  overflow-x: scroll;
  white-space: nowrap;
}

HTML代码

<p>Display a list of links as a horizontal menu:</p>

<div>123
  <span><a href="/html/default.html" target="_blank">HTML</a></span>
  <span><a href="/css/default.html" target="_blank">CSS</a></span>
  <span><a href="/js/default.html" target="_blank">JavaScript</a></span>
</div>

关键修改说明 #

1. white-space: nowrap：强制div内部的行内/inline-block元素保持在同一行，不会因宽度不足自动换行
2. overflow-x: scroll：正确启用横向滚动条，当内部内容总宽度超过div的150px限制时，滚动条自动生效

内容的提问来源于stack exchange，提问作者varghese