Javascript 在可滚动的div中显示图像

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

[图一][图二][图三]

如果有很多图像，我希望

它们在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>

我确实在div上看到了“滚动”，但已褪色。我的图像是这样的：

[图一][图二][图三]

[图片4]

我错过了什么？

给你：

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>

---

添加

空白：nowrap

：

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

---

尝试将这些CSS规则添加到包装器

div

overflow-x: scroll;
overflow-y: hidden;
width:100%;

---

尝试删除col-md-12将固定高度添加到父div不知道为什么，但这使我的带有图像的div“突出”，变得太长而不是可折叠（可能与我使用ui.bootstrap模式有关）谢谢，非常小的简易修复我建议不要使用内联样式，您会发现维护外部CSS文件要容易得多。

overflow-x: scroll;
overflow-y: hidden;
width:100%;