8

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

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

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

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

4

3 回答 3

11

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

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

#thumbset {
    overflow: visible;
}
于 2013-02-25T06:02:26.290 回答
10

您可以尝试以下 css ：

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

#thumbset {
width: 550px;// whatever width you want
}
于 2013-02-25T06:07:00.617 回答
0

使用此代码：

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

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

于 2015-08-12T14:13:35.707 回答