一系列浮动元素,不换行,而是水平滚动

如何使用 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;
}

你试过吗?

white-space: nowrap;

在你的缩略图容器里?

不要浮动,请尝试以下操作:

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

去除 这个 div { overflow:hidden; } 其余保持不变。

这有点简单,它们会按你想要的方式跨越和滚动。

将空白属性设置为“nowrap”也适用于浮动元素是一个常见的错误。 它只适用于 内联的 元素或 内联块 元素。

我想您需要浮动元素是一个块,这样您就可以将它们转换为内联块。 在所有浏览器上都可以通过一些技巧获得它:

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

这个解决方案打开了许多新的网页设计场景需要探索,所以我感激地给予作者适当的评价: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

在这里,您可以阅读说明空白属性和浮动元素的文档: http://reference.sitepoint.com/css/white-space

干杯!

这让我发疯,搞不清楚。

这有点管用:

.thumbnail {
    padding-right:4px;
    width:100px; height:75px;
    display: table-cell;
}
.thumbnail img {
    border:1px solid black;
    display: block;
    width:100px; height:75px;
}

但是我不知道浏览器对显示的支持:表格单元格;

就个人而言,我要么竖起大拇指,要么使用javascript(浏览器滚动条无论如何都很难看)。

几个月前我也遇到过同样的问题。我尝试了这里提出的所有解决方案。它们不工作。

这是我的解决方案:

给wrapper div必要的宽度修正(body也将扩展)。然后将内容放入超大包装容器(浮动或内联)。现在可以使用窗口的水平滚动条作为滚动条。现在页面上的其他所有内容(页眉、页脚等)都在滚动。你可以给这些容器定位:固定。现在,当您滚动超宽的包装器/正文时,它们保持在该位置。

我仍然希望能够使用块元素的缩略图tho,这样我可以添加边框和什么不。

你可以用“borders and whatnot”来 display: inline-block 元素。您也可以使用固定高度 inline-block 元素,使您的设计保持一致。

基本上,使 .thumbnail 不漂浮 显示:内联块 ,应用宽度/高度、边框等 #thumbnails_container 使用 white-space: nowrap .

为缩略图添加另一个容器,并将其宽度设置为所有缩略图的总宽度(及其边距、边框和填充)。请看下面名为“缩略图滚动容器”的分区:

<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 id="thumbnails_scrollcontainer" style="width : 848px;">
            <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>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

这条路对我很有用

main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}

main .thumbnail {
display: inline-block;}