html - 试图强制 DIV 在 CSS 中具有水平滚动条

Question

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

请看我网站右下角的一排缩略图:http://stevenlloydarchitecture.co.nz/building.html

我想做到只有四个缩略图可见，水平滚动才能看到其他缩略图。

但是，当我尝试指定宽度时，缩略图会相互移动到下方(如当前显示的那样)。我尝试制作一个父 Div(在我的示例中使用 id“slider”)来设置宽度和高度，并尝试了指定宽度、高度和溢出到 div 的尽可能多的组合，希望强制水平滚动但没有任何结果工作了，我完全被难住了。预先感谢您提供任何提示。

Answer 1

您可以将以下样式添加到 #slider div 以仅获得滚动图像的水平滚动条。之后，它只是调整和定位 div。 white-space: nowrap 属性告诉图像不要换行到下一个“行”。

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

#thumbset {
    overflow: visible;
}