Html DIV 水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16205151/
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
DIV Horizontal Scroll
提问by user1845791
I have several HTML elements inside a div with a fix width. The sum of the width of the inner elements is greater than the width of the container. How can I make the inner elements appear inline (and showing a horizontal scroll) instead of breaking after reaching the parent's width?
我在一个固定宽度的 div 中有几个 HTML 元素。内部元素的宽度总和大于容器的宽度。如何使内部元素显示为内联（并显示水平滚动）而不是在达到父级宽度后中断？
I could add a wrapper and assign it a min-width, but I want something that will change its size if the contents change.
我可以添加一个包装器并为其分配一个最小宽度，但我想要一些东西，如果内容发生变化，它的大小就会改变。
<div id="container">
<div class="contents" id="one"></div>
<div class="contents" id="two"></div>
<div class="contents" id="three"></div>
<div class="contents" id="four"></div>
</div>
#container {
width: 100px;
background-color: #CCC;
overflow: auto;
height: 100px;
}
.contents {
width: 35px;
height: 60px;
float: left;
}
#one {
background-color:#ABC;
}
#two {
background-color:#333;
}
#three {
background-color:#888;
}
#four {
background-color:#AAA;
}
http://jsfiddle.net/elohr/G5YZ6/2/
http://jsfiddle.net/elohr/G5YZ6/2/
Thanks!
谢谢！
回答by Niet the Dark Absol
回答by Praveen Kumar Purushothaman
Try this:
尝试这个：
- Replace
float: leftwithdisplay: inline-block; - Use
white-space: nowrap;to the container.
- 替换
float: left为display: inline-block; - 用于
white-space: nowrap;容器。
CSS:
CSS：
#container {
width: 100px;
background-color: #CCC;
overflow: auto;
height: 100px;
white-space: nowrap;
}
.contents {
width: 35px;
height: 60px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/praveenscience/G5YZ6/6/
小提琴：http: //jsfiddle.net/praveenscience/G5YZ6/6/
回答by Zeddy
In your root DIV element you could always specify that overflow is scrollable:
在您的根 DIV 元素中，您始终可以指定溢出是可滚动的：
<div id="container" style="overflow: scroll;">
<div class="contents" id="one"></div>
<div class="contents" id="two"></div>
<div class="contents" id="three"></div>
<div class="contents" id="four"></div>
</div>
