CSS 使用 overflow-x 滚动在一行中的 div

Question

我想要一个具有固定高度和一行内部项目的列表。如果项目的数量超过宽度，我想要一个 overflow-x 滚动，这样项目就不会被推到下一行。

到目前为止，我已经尝试过 ul/li 的内联块和 div 的向左浮动，但它们都被推到下一行..

感谢您的帮助！

Answer 1

试试这个：

.container {
  overflow: auto;
  white-space:nowrap;
  width: 500px;
}
.item {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align:top;
  margin-right:20px;
  white-space:normal;
}

工作示例：https://jsfiddle.net/3dsign/gw35yq9p/

Answer 2

与其使用 display:inline-block 和浮动，不如尝试学习 Flexbox，它更容易并且具有令人难以置信的功能：Flexbox Tutorial

因此，如果您愿意，请使用：

.container {
  overflow: auto;
  display:flex;
  justify-content:space-around;
}
.item {
  padding: 10px;
  border: 1px solid red;
  vertical-align:top;
  white-space:normal;
}

CSS 使用 overflow-x 滚动在一行中的 div

CSS divs in one row with overflow-x scroll

html

css

overflow

twitter-bootstrap-3