显示内联不适合我

Question

你好，我有这个脚本，我想，这个图像在一行而不是刹车其他行，但我的代码不能很好请帮助我 HTML

<div class="history_slider">
  <img src="img/pic/red-bull.jpg"/>
  <img src="img/pic/red-bull.jpg"/>
  <img src="img/pic/red-bull.jpg"/>
  <img src="img/pic/red-bull.jpg"/>         
</div>

CSS

.history_slider{
    position:relative;
    width:900px;
    height:500px;
    outline:1px solid #d6d7db;
    overflow:scroll;
}
.history_slider img{
    width:700px;
    height:100%;
    margin-left:125px;
    margin-right:125px;
    display:inline;
    white-space: nowrap;
}

我想要这样

Answer 1

只需将white-space: nowrap;声明从.history_slider img移至.history_slider选择器即可。也许你必须调整宽度，因为他们似乎没有加/适合。

此外，看起来你可以用初学者的课程，因为这些都是非常基本的事情。 This Google search包含指向此类教程的链接，您可以根据自己的学习方式（文本，文字加实时示例，视频等）自行选择。

Answer 2

这是你要追求的东西吗？

http://jsfiddle.net/2p348Lep/

如果您希望在一行中包含不同的图像，请确保它们不会超过div的宽度。在你的情况下，div为900px，而图像为700px。

.history_slider img{
    display:inline-block;
    white-space: nowrap;
}