Html 如何在单行中水平滚动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30180951/
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
How to Horizontally Scroll Images In Single Line
提问by carloabelli
I am trying to create a sort of basic carousel of images. My question is: how can I get all my slides to display in one line and get them to scroll horizontally instead of vertically?
我正在尝试创建一种基本的图像轮播。我的问题是：如何让我的所有幻灯片显示在一行中并让它们水平滚动而不是垂直滚动？
Here is an example: http://jsfiddle.net/3f7fcspL/
这是一个例子：http: //jsfiddle.net/3f7fcspL/
HTML:
HTML：
<div id="carousel">
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
</div>
CSS:
CSS：
#carousel {
width: 100%;
height: 150px;
background-color: #ff0000;
overflow: auto;
}
#carousel .slide {
display: inline-block;
}
回答by Akshay
Simply add white-space:nowrap
只需添加 white-space:nowrap
#carousel {
width: 100%;
height: 150px;
background-color: #ff0000;
overflow: visible;
white-space:nowrap;
}
#carousel .slide {
display: inline-block;
}<div id="carousel">
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
<div class="slide">
<img src="http://placehold.it/300x150"/>
</div>
</div>