Question

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

请参阅我网站右下角的缩略图行：http://stevenlloydarchitecture.co.nz/building.html

我想让它只显示四个缩略图，然后水平滚动以查看其他缩略图。

然而，当我尝试指定宽度时，缩略图会相互移动（如当前显示的那样）。我尝试制作父Div（在我的示例中使用id“滑块”）来设置宽度和高度，并尝试了多个指定宽度，高度和溢出到div的组合，希望强制水平滚动但没有任何东西工作，我完全难过。提前感谢任何提示。

Answer 1

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

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

#thumbset {
    overflow: visible;
}

Answer 2

您可以尝试以下css：

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

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

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>

了解此代码如何在这个小提琴中运行，这是一种简单的方法：add horizontal scroll bar

试图通过CSS强制DIV拥有一个水平滚动条

3 个答案: