动态图像尺寸仅限水平滚动条

Question

如何在div中仅显示水平滚动条.我有条形图像,我想只为它们显示水平滚动条.我不希望显示垂直滚动条.请帮忙...

这是我的HTML

<div id="containersimg">
    <div id="wrapper">
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
        <img alt="" src="http://screenshots.en.sftcdn.net/en/scrn/79000/79347/video-thumbnails-maker-8.jpg" />
    </div>
</div>

这是我的CSS

#wrapper {
    width: auto;
    height: 130px;
}

#containersimg {
   background-color: #bbb;
   width: 300px;
   height: 130px;
   overflow-x: scroll;
}

img {
   float: left;
    clear: none;
   margin: 5px;
}

我创造了一个小提琴,以展示我想要实现的目标

小提琴链接

编辑1: 我能想到的唯一方法是通过向wrapperdiv 添加宽度,我不能这样做因为图像的数量和宽度是动态的

Answer 1

尝试使用overflow-x: scroll; overflow-y: hidden;

这个 CSS 应该用在你的 div 上。

它只会显示 x 轴滚动条并隐藏 y 轴滚动条。:)

如果您希望图像排成一行，请添加display: inline; white-space: nowrap;到 div 中。看到这个。

或者使用列表。：） 像这样。