html - 垂直滚动的div

Question

我需要实现一个具有左右滚动效果的元素，如下所示:

如何做到这一点？

这是我的代码:

<div class="populardiv">
   <div class=populart></div>
   <div class=populars></div>
   <div class=populars></div>
   <div class=populars></div>  
   <div class=populars></div>
   <div class=populars></div>   
</div>




.populardiv
{
    float:left;
    width: 100%;
    height: 35vw;
    background-color:white;
    overflow-x: scroll;        

}

.populars
{
    float:left;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    background-color: red;
    margin-left:3vw; 

}

我的输出屏幕:

谢谢。

Answer 1

在容器中添加white-space:nowrap，然后将子元素改为display:inline-block，而不是float

.populardiv {
  float: left;
  width: 100%;
  height: 35vw;
  background-color: white;
  overflow-x: scroll;
  white-space: nowrap;
}

.populars {
  display: inline-block;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  background-color: red;
  margin-left: 3vw;
}

<div class="populardiv">
  <div class=populart></div>
  <div class=populars></div>
  <div class=populars></div>
  <div class=populars></div>
  <div class=populars></div>
  <div class=populars></div>
</div>