尝试通过CSS使DIV具有水平滚动条

Question

我正在尝试创建一个带有缩略图的div，并设置其固定的宽度（330像素）和高度（100像素）。我想使内容水平排列，以便使用水平滚动条查看内容。请参考我的网站右下角的缩略图行：http://stevenlloydarchitecture.co.nz/building.html。我只想显示其中四个缩略图，其他的需要通过水平滚动条才能查看。但是当我尝试指定宽度时，缩略图会相互垂直排列（如当前所示）。我尝试创建父级Div (在我的示例中为id "slider") 并设置它的宽度和高度。我已经尝试了各种组合来指定子div的宽度、高度和溢出属性，以期强制实现水平滚动，但是没有任何作用，我感到十分困惑。非常感谢您提供的任何提示。

- Sceneman

Answer 1

你可以将以下样式添加到 #slider div 中，以仅获得一个水平滚动条来浏览图像。之后，只需调整 div 的大小和位置即可。属性 white-space: nowrap 表示图像不会换行到下一行。

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

#thumbset {
    overflow: visible;
}

- RJo

---

现在的点赞分数反映了这个答案在更广泛情况下的优越性。 - Jerome

Answer 2

您可以尝试以下CSS：

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

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

- Sanober Malik

Answer 3

请使用以下代码：

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

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

- Babel