Css实现内容溢出添加横向滚动条

效果图

在这里每一个div标签包裹着一张图片和一行文字
以下代码直接copy看效果

        <div class="banner">
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
        </div>

.banner {
      width: 100%;
      height: 100%;
      overflow-x: scroll; /*添加横向滚动条*/
      white-space: nowrap;/*不换行*/
    }

    .one {
      width: 45%;
      margin-right: 2%;
      display: inline-block;/*设为inline-block*/
    }

    .one img {
      width: 100%;
      height: 80%;
    }

    .one p {
      font-size: 18px;
      margin-left: 20px;
      margin-top: 10px;
      color: #FFF;
    }