我试图为我的画廊实现一个滑块.
现在,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;
}
注意：我正在使用font-size：0来使项目彼此相邻.
