Question

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

这是我的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

Answer 2

浮动左侧会导致问题。如果您将其更改为display: inline-block，然后将white-space: nowrap添加到<ul>，则会滚动它们。像这样：

.admin-shop-images {
  list-style: none;
  overflow-x: auto;
  width: 800px;
  white-space: nowrap;
}

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

http://jsfiddle.net/PJGGC/8/

Answer 3

Try this

IT将需要一个容器div，它将具有固定大小，内部ul的宽度将超过div的宽度。

HTML

<div>
    <ul class="admin-shop-images clearfix">
        <li> <a style="background-image: url(http://distilleryimage10.s3.amazonaws.com/1c21feee5b4911e3a4d80e849028c7eb_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/d6057b165b4d11e39ba70a3e328747b8_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/4f8270305b4d11e389310e362925b2d5_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/8d3a2c085b4b11e3ab4c12ca54d8f342_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage2.s3.amazonaws.com/382915805b4b11e3b5c00e9e2a89cc53_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage7.s3.amazonaws.com/e0596b165b4a11e39c4d0ee0497810b2_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/07ca8a4a5b6411e3a1741240743416c5_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage4.s3.amazonaws.com/c6d561485b6011e398920ee3b99546be_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage8.s3.amazonaws.com/441215805b6011e3bc620eb29dbbaea3_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage6.s3.amazonaws.com/8e7faf6a5b5b11e380d712128faa8e82_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage7.s3.amazonaws.com/87c3a7605b8a11e3a33e1264bd1e5b12_5.jpg)"></a>

        </li>
    </ul>
</div>

CSS

{
    list-style: none;
    overflow-x: scroll;
    width: 800px;
    height:150px
}
.admin-shop-images {
    list-style: none;
    width: 1500px;
}
.admin-shop-images li {
    background-color: #f3efea;
    margin-right: 25px;
    width: 105px;
    height: 105px;
    float: left;
}
.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 4

刚刚遇到这个开源。 simply scroll v2希望这有助于某人。这个脚本可以自定义，也可以从中学习。

使用<ul>和<li> </li> </ul>进行水平滚动图像问题

4 个答案: