Question

我有一个图像数组（src网址为他们），我想将它们显示在一行中，如下所示：

[Image1] [image2] [image3]

如果有很多图像，我希望它们所在的<div>在x轴上变得可滚动，这样图像仍然在一行中。

这就是我现在所拥有的：

<div style="overflow-x:scroll" class="col-md-12">
    <span ng-repeat="item in images" >
        <a ng-href="{{item.ServerRelativeUrl}}" target="_blank">
            <img width="128" ng-src="{{item.ServerRelativeUrl}}" alt="Description">
        </a>
    </span>
</div>

我确实看到了＆＃39;滚动＆＃39;在div上，但褪色。我的图像是这样的：

[Image1] [Image2] [Image3]

[图像4]

我在这里缺少什么？

Answer 1

你走了： http://jsfiddle.net/danhaswings/nndhjp67/

<强> HTML

<div id="slide">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
</div>

<强> CSS

#slide {
    width: auto;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Answer 2

添加white-space: nowrap：

<div style="overflow-x:scroll; white-space: nowrap" class="col-md-12">

Answer 3

尝试将这些CSS规则添加到您的包装器overflow-x: scroll; overflow-y: hidden; width:100%;。

connectPeripheral

在可滚动的div中显示图像

3 个答案: