Css 溢出-x不工作

我正在尝试为我的图库实现一个滑块。 现在，css有一个问题，溢出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;
}

---

浮动元素后，将其从文档流中取出，并且不会在父元素的宽度中进行计算。您必须在项目上使用

display:inline block

组合，而不是float，然后在父项上使用

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

使项目彼此相邻

更新

由于这篇文章已经很老了，可能值得注意的是，使用flexbox可以用更少的代码完成这项工作（取决于所需的浏览器支持级别）：

#testDiv{
宽度：400px；
显示器：flex；
溢出-x：自动；
}
.testimgdiv{
宽度：120px；
高度：100px；
flex:0自动；
}

@davidpauljunior不起作用。。。我已经试过了，如果有人投了反对票，请解释一下为什么…投了赞成票来平衡它。我认为向下投票很苛刻。字体大小：0如何使它一个接一个地出现？如何将overflow-x与浮点元素一起使用？

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