如何防止按钮向下溢出？

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

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

这是 JSfiddle Example

Answer 2

您可以在容器上设置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 3

由于您在父 div 上设置了动态宽度，容器将根据 window 宽度调整大小，迫使按钮换行。

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

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

如何防止按钮向下溢出？

How to prevent buttons overflowing downward?

html

css

css-position

overflow

css-float