CSS:一系列浮动元素,没有包装,而是水平滚动

Question

我正在制作专辑查看器.在顶部我想要一个所有图像缩略图的水平容器.现在所有的缩略图都包含在div中float:left.我试图找出如何在太多时将这些缩略图保持包裹到下一行,而是将所有缩略图保留在一个水平行中并使用滚动条.

这是我的代码:(我不想使用表格)

<style type="text/css">
    div {
        overflow:hidden;
    }
    #frame {
        width:600px;
        padding:8px;
        border:1px solid black;
    }
    #thumbnails_container {
        height:75px;
        border:1px solid black;
        padding:4px;
        overflow-x:scroll;
    }
    .thumbnail {
        border:1px solid black;
        margin-right:4px;
        width:100px; height:75px;
        float:left;
    }
    .thumbnail img {
        width:100px; height:75px;
    }
    #current_image_container img {
        width:600px;
    }
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Answer 1

如何使用display: inline-block这种方式,你可以在块元素上使用边框,并获得水平滚动条.

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}

Answer 2

你试过了吗

white-space: nowrap;

在#thumbnails_container中？