溢出-x无法正常工作

Question

我正在尝试为我的画廊实现一个滑块.现在,css存在overflow-x无法正常工作的问题.(我想要一个水平滑块而没有垂直滚动)

这是小提琴:

请看看.

.testimg{
    height: 100%;
    width: 100%;
}
#testDiv{
    width: 400px;
    overflow: auto;
    float: left;
    overflow-y:hidden;
    border:1px solid black; 
}
.testimgdiv{
    width: 120px;
    height: 100px;
    float: left;
}

Answer 1

一旦浮动了元素,就可以将它们从文档流中取出,并且不会在父元素的宽度中计算出来.您必须使用项目的组合display: inline-block而不是浮动,然后white-space: nowrap在父项上使用.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap; 
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

小提琴

注意:我正在使用font-size: 0这些项目显示在彼此旁边.