Question

我有一个包含一些按钮的div。 div有一个溢出，这样当屏幕调整大小时按钮仍然可用，但它没有按照我希望的方式溢出。

div {
  background-color: #eee;
  width: 300px;
  height: 30px;
  overflow: auto;
}
button {
  height: 30px;
}

<div>
  <button>BUTT 01</button>
  <button>BUTT 02</button>
  <button>BUTT 03</button>
  <button>BUTT 04</button>
  <button>BUTT 05</button>
  <button>BUTT 06</button>
</div>

当div小到足以触发溢出时，它会向下移动最后一个按钮然后溢出。

是否可以让图像彼此保持水平并沿x轴溢出？

我有一个jsFiddle https://jsfiddle.net/ntxcxkhx/来说明我遇到的问题

Answer 1

您可以在容器上设置white-space: nowrap;。

div {
  background-color: #eee;
  width: 200px;
  white-space: nowrap;
  overflow: auto;
}
button {
  height: 30px;
}

<div>
  <button>BUTT 01</button>
  <button>BUTT 02</button>
  <button>BUTT 03</button>
  <button>BUTT 04</button>
  <button>BUTT 05</button>
  <button>BUTT 06</button>
</div>

Answer 2

只需将display:flex和overflow-x:auto; overflow-y:hidden添加到div

即可

这是JSfiddle Example

Answer 3

由于您在父div上设置了动态宽度，因此容器将相对于窗口宽度调整大小，从而将按钮强制转换为新行。

使用overflow-x: scroll和white-space: nowrap，您应该得到您正在寻找的行为。

JSFiddle：https://jsfiddle.net/ntxcxkhx/27/

如何防止按钮向下溢出？

3 个答案: