html - 仅在 div 中添加 x 方向的内容

Question

如何只添加x方向的内容？

在<div>标签我放了 5 到 6 张图片。大于 div 的总宽度。因此，如果到达 div 宽度的末尾，它会返回到新行。

我放了

img
{
    float:left;
}

但没有运气。

div 的 oveflow-x:scroll;

但没有运气。

我希望图像水平而不是垂直添加。我想要 x 方向的滚动条以查看所有图像。

我哪里不见了？

HTML:

<div id="scrollar">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
</div>

宽度包含 5 个图像。之后它转到新行。我只想要该行中的所有图像。它应该通过在 x 方向滚动可见。

Answer 1

不需要指定容器的宽度或添加额外的标记，只是告诉它不要换行。

http://jsfiddle.net/BHD5Y/

div#scrollar {
    white-space: nowrap;
    overflow-x: scroll;
}