溢出-x：滚动不起作用

Question

我有一个带有浮动（左）图像的div，但是overflow-x : scroll;似乎不起作用..

这是我的容器：

.browse-gallery {
    width: 100%;
    height: 110px;
    overflow-x: scroll;
    overflow-y: hidden;
    border-top: 7px solid #585453;
    background: #585453;
    white-space: nowrap;
    float: left;
}

和图片：

.browse-gallery img {
    width: 109px;
    height: 81px;
    display: block;
    border-top: none;
    float: left;
    position: relative;
    cursor: pointer;
    margin-right: 5.7px;
    white-space: nowrap;
}

我该如何解决这个问题？谢谢。

Answer 1

删除浮动并添加显示：内联块： Demo

.browse-gallery img {
        width: 109px;
        height: 81px;
        display: inline-block;
        border-top: none;
        /*float: left;*/
        position: relative;
        cursor: pointer;
        margin-right: 5.7px;
        white-space: nowrap;
        background:#fff;
    }