仅使用 CSS 进行水平滚动答案

【问题标题】：Only horizontal scroll with CSS仅使用 CSS 进行水平滚动
【发布时间】：2012-03-13 00:34:50
【问题描述】：

在我正在处理的图片库中，我想要一个水平滚动（即缩略图是水平列出的）并且包含它们的区域应该有一个固定的滚动宽度，如果有很多适合该区域的话。

以下是目前为止的 CSS 代码，但正如您在代码下方的快照中所见，它似乎不起作用。我可以写什么来完成我想要的？

提前致谢！

#thumbnailArea {
    padding: 5px;
    width: 600px;
    height: 90px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
}

缩略图区域的 HTML 代码（使用 ASP.net webforms 生成）如下：

<div id="thumbnailArea"> 

            <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

            <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on...

</div>

【问题讨论】：

thumnailArea里面的html长什么样子？
我发布了一个答案，应该可以解决问题
任何答案有帮助吗？如果是这样，你能接受最有用/最正确的吗？见stackoverflow.com/faq#howtoask。如果没有，您能否提供更多详细信息，以便我们更好地回答您？谢谢！

标签： css scroll gallery positioning thumbnails

【解决方案1】：

这是因为容器适合您提供的宽度。为了达到预期的效果，您应该使用两个嵌套的 div：具有给定宽度的外部和包含图像的内部。

示例：http://jsfiddle.net/jTJFa/1/

HTML：

<div class="box">
    <div class="area">
        <img/>
        ...
    </div>
</div>

CSS：

.box {
    width: 500px;
    overflow-x: scroll;
}

.area {
    width: 1000px;
}

【讨论】：

我正忙着打字:)
提示：先贴出答案，再写例子；)

【解决方案2】：

虽然您已关闭垂直滚动，但 #thumbnailArea 宽度不受影响（因此，强制换行）。这应该可以解决问题：

#thumbnailArea {
 white-space:nowrap;
}

【讨论】：

【解决方案3】：

为此，您需要在缩略图 div 中设置一个宽度，以便所有图片都适合其中：

<div id="thumbnailArea"> 
    <div style="width: 1000px;">
         <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

        <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

       and so on...
    </div>
</div>

这应该可以解决问题，改变宽度，这样你就不会在最后有很大的空白空间

【讨论】：