溢出-x无法正常工作

Question

我正在尝试为我的图库实现一个滑块。 现在，css存在overflow-x无法正常工作的问题。 （我想要一个水平滑块而没有垂直滚动）

这是fiddle:

请看看。

.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;
}

<强> Fiddle

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

Answer 2

#testDiv {
   border: 1px solid #FF0000;
   float: left;
   height: auto;
   overflow-x: auto;
   width: 400px;
}