html - 溢出 x 不工作

Question

我正在尝试创建一个包含图像的水平可滚动 div，但不确定为什么下面的代码不起作用。

此外，div 中的图像正在垂直显示，而不是水平显示。 谁能帮我理解这里的问题

 <div>
     <img  src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
     <img   src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
     <img   src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
 </div>

下面是CSS:

div {
    width:400px;
    height:550px;
    border:thin solid black;
    overflow-x:scroll;
    overflow-y:hidden;
    position:relative;
}


img {
    width:350px;
    height:500px;
}

Answer 1

因为<img>的显示是display: inline; ，你应该防止他们打破界限:

使用:

div {
    white-space:nowrap;
}

做这个

演示:http://jsfiddle.net/fish_ball/vrD6E/