Question

我希望有一个固定高度的列表和一行内的项目。如果物品数量超过宽度，我想要一个溢出-x滚动，这样物品就不应该被推到下一行。

到目前为止，我已经玩过针对ul / li的inline-block而且还为divs漂浮了但是他们都被推到了下一行..

感谢您的帮助！

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和floatings，而是尝试学习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 scroll分成一行

2 个答案: