html - 使用 和 的水平滚动图像问题

Question

我正在尝试创建图像的水平滚动，如 this 中所示 fiddle 。出于某种原因，我无法让图像堆叠在一行中，它们总是转到下一行，这不是我想要的。如何在没有任何插件的情况下创建水平滚动图像？

这是我的 CSS 设置:

.admin-shop-images {
    list-style: none;
    overflow-x: scroll;
    width: 100%;
}

.admin-shop-images li {
    background-color: #f3efea;
    margin-right: 25px;
    width: 105px;
    height: 105px;
    float: left;
    display: inline-block;
}

.admin-shop-images li a {
    display: block;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
}

.admin-shop-images li:last-child {
    margin-right: 0;
}

Answer 1

检查这个fiddle

我将内容放在 div 中，并在我给出的 css 中

  #ImageContainer{
    width:200px;
overflow-x:scroll;   
    height:140px;
overflow-y:hidden;       
}

用这个你可以改变div的宽度来缩小整个容器的大小检查较小的 div 大小 here