css – Overflow-x不工作

我试图为我的画廊实现一个滑块.
现在,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;
}

解决方法

一旦你浮动了元素,你就把它们从文档流中拿出来,而不会以父元素的宽度计算出来.您必须使用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;
}

Fiddle

注意：我正在使用font-size：0来使项目彼此相邻.