Overflow-x not working

问题:

I am trying to implement a slider for my gallery. Right now,the css has an issue where the overflow-x doesnt work properly. (I want a horizontal slider and no vertical scroll)

Here's the fiddle:

Please do take a look.

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

回答1:

Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.

#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

Note: I'm using font-size: 0 to make the items appear right next to each other.

回答2:

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