水平滚动，不要掉到下一行

Question

我正在尝试获取一个水平滚动的列表，而不是拖放到下一行。我有类似下面的东西，但在它掉到下一行之前只能看到第一个项目。我希望它在一行上继续并水平滚动。

div {
  width: 500px;
  overflow-x: scroll;
  max-height: 120px;
}

<div>
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
  <img src='http://via.placeholder.com/100x100' alt="">
</div>

Answer 1

使用 flex、display: flex 将水平对齐您的内容（使用 flex-direction: column 垂直对齐）。

div{
  overflow-x:scroll;
  overflow-y:hidden;
  display: flex;
}

div img {
  margin: 2px;
}

<h1> Before </h1>
<div>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>
<h1> After </h1>

Answer 2

尝试：

.main{
  display: flex;
  flex-direction: row;
  width:500px;
  overflow-x:scroll;
  overflow-y:hidden;
  max-height:120px;
}

.main img {
   
margin: 5px;

}

<div class="main">
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>

Answer 3

这是最简单、最正确的方法。其他方法确实有效，但预期的方法是这样的：

div.scrollable{
  width:500px;
  height:130px;
  overflow-x:scroll;
  white-space:nowrap;
}

<div class="scrollable">
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
<img src='http://via.placeholder.com/100x100'>
</div>

水平滚动，不要掉到下一行

Scroll horizontally and don't drop to the next line

html

css

scroll

horizontal-scrolling