html - 溢出-x : scroll not working

Question

我有一个内部有 float (左)图像的 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

删除 float 并添加显示:内联 block : 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;
    }