CSS 溢出-x 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24132943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow-x not working
提问by Nevin Madhukar K
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)
我正在尝试为我的画廊实现一个滑块。现在，css 存在溢出-x 无法正常工作的问题。（我想要一个水平滑块，没有垂直滚动）
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;
}
回答by davidpauljunior
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-blockon the items instead of float, and then use white-space: nowrapon the parent.
浮动元素后，您已将它们从文档流中取出，并且不会在父元素的宽度中计算。您必须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;
}
Note: I'm using font-size: 0to make the items appear right next to each other.
注意：我正在使用font-size: 0使项目彼此相邻显示。
UPDATE
更新
As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):
由于这篇文章很旧，可能值得注意的是，这可以使用 flexbox 以更少的代码完成（取决于所需的浏览器支持级别）：
#testDiv{
width: 400px;
display: flex;
overflow-x: auto;
}
.testimgdiv{
width: 120px;
height: 100px;
flex: 0 0 auto;
}
回答by Kisspa
#testDiv {
border: 1px solid #FF0000;
float: left;
height: auto;
overflow-x: auto;
width: 400px;
}
