Отображение изображений в прокруткой DIV

Question

У меня есть массив изображений (ЦСИ URL для них), и я хочу, чтобы отобразить их в строке, например, так:

[Изображение1] [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> 

я увидеть «прокрутки» на DIV, но утрачен. И мои изображения, как это:

[Изображение1] [Image2] [Image3]

[image4]

Что я здесь отсутствует?

Answer 1

Добавить white-space: nowrap:

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

Answer 2

Здесь вы идете: 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 3

Попробуйте добавить эти правила CSS в свою обертку div.

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