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>

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

3 个答案: