css实现移动端横向滚动不换行效果

1.html

<div class="content-img">
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
   <div class="contentItem-img"></div>
 </div>

2.css

.content-img {
   white-space: nowrap;
   overflow-x: scroll;
   margin-top: 0.15rem;
   height: 1.5rem;
   background: saddlebrown;
   .contentItem-img {
     width: 1.4rem;
     height: 1.5rem;
     background: rebeccapurple;
     display: inline-block;
     vertical-align: top;
   }
   .contentItem-img + .contentItem-img {
     margin-left: 0.15rem;
   }
 }

3.预览