只有带CSS的水平滚动

问题描述：

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

到目前为止，下面是CSS代码，但它看起来并不像你在代码下面的快照中看到的那样工作。我可以写什么来完成我想要的？

在此先感谢！

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

enter image description here

缩略图区域（与ASP.net web表单生成）的HTML代码如下：因为容器适合于宽您提供这

<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看起来像什么？ – 2012-02-22 16:37:58

该代码被添加... – holyredbeard 2012-02-22 16:42:38

我发布了一个答案，那应该可以解决问题 – 2012-02-22 16:51:47

答

虽然您已关闭垂直滚动，所述#thumbnailArea宽度不受影响（并且作为结果，强制包装）。这应该做的伎俩：

#thumbnailArea { 
white-space:nowrap; 
}

答

。为了达到所需的效果，您应该使用两个嵌套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; 
}

我只是在忙着打字:) – Evert 2012-02-22 16:47:35

提示：首先发表答案，然后写一个例子;） – 2012-02-22 16:51:55

答

对于这个工作，你需要的缩略图格内一个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>

这应该做的伎俩，改变宽度，以便在末尾没有大量空白空间

只有带CSS的水平滚动

相关推荐