时间戳

首页 > 解决方案 > 水平滚动，不要掉到下一行

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

问题描述

我试图获得一个水平滚动的列表，而不是放到下一行。我有类似以下的内容，但只能在它下降到下一行之前看到第一个项目。我希望它在一行上继续并水平滚动。

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>

标签： htmlcssscrollhorizontal-scrolling

解决方案

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

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>

推荐阅读