如何通过css实现图片横向排列滚动效果？

.imageList{
    overflow-x: auto;
    overflow-y: hidden;
    height:180px;
    white-space: nowrap;
   img{
    width:auto;
    height:100%;
    margin-right:10px;
   }
 }

<div class="imageList">
  <img src="1.jpg"/>
  <img src="2.jpg"/>
  <img src="3.jpg"/>
  <img src="4.jpg"/>
  <img src="1.jpg"/>
</div>

white-space: nowrap;