试图通过CSS强制DIV具有水平滚动条

I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.

我正在尝试制作一个带有缩略图的div，它具有一个设置宽度(330px)和设置高度(100px)，并使其内容水平排列，以便使用一个水平滚动条来查看内容。

Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html

请在我的网站右下角看到一行缩略图:http://stevenlloyd darchitecture.co.nz/building.html

I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.

我想让它只有四个缩略图是可见的，你可以水平滚动查看其他的。

However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.

但是，当我尝试指定宽度时，缩略图会移动到彼此下方(如当前显示的那样)。我尝试了使用父Div(在我的示例中使用id“slider”)设置宽度和高度，并尝试了很多组合来指定宽度、高度和溢出到Div，希望强制水平滚动，但没有任何效果，我完全被难住了。提前谢谢你的建议。

3 个解决方案

#1

You can try the following css :

您可以尝试以下css:

#slider  {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}

#thumbset {
width: 550px;// whatever width you want
}

#2

You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".

您可以向#slider div添加以下样式，以获得一个水平滚动条，可以在图像中滚动。然后，它只是调整div的大小和位置。空白区域:nowrap属性告诉图像不要将其包装到下一个“行”。

#slider {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#thumbset {
    overflow: visible;
}

#3

Use this code:

使用这段代码:

<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
  Here's a random text .............
</div>

see how this code works in this fiddle, it's an easy way : add horizontal scroll bar

看看这段代码是如何工作的，这是一个简单的方法:添加水平滚动条

#1