css 横向盒子 不换行 超过出现横向滚动条

为了使得一个容器内的盒子不换行，并且当盒子的总宽度超出容器宽度时出现横向滚动条，您可以使用CSS的white-space属性配合overflow-x属性。

以下是实现这种效果的CSS代码示例：

.container {
  white-space: nowrap; /* 保证盒子不换行 */
  overflow-x: auto; /* 当内容超出容器宽度时出现滚动条 */
}
 
.box {
  display: inline-block; /* 让盒子横向排列 */
  /* 其他样式 */
}

html

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <!-- 更多盒子 -->
</div>

在这个例子中，.container 是包含盒子的容器，.box 是每个水平排列的盒子的类。通过设置white-space: nowrap;，所有的盒子将在同一行内显示，不会换行。而overflow-x: auto;则确保当盒子的总宽度超出.container的宽度时，水平滚动条会出现，以便用户可以滚动查看所有的盒子。