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

明知山

发布于 2020-09-03 10:20:49

2.4K00

代码可运行

文章被收录于专栏：前端开发随笔前端开发随笔

运行总次数：0

代码可运行

先放一张效果图

在这里每一个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;
    }

css注释的搭配才有效

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css