水平滚动并且不要掉到下一行

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

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

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>