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

时间:2022-07-24
本文章向大家介绍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;
    }

css注释的搭配才有效

随机文章
WEB前端知识点必读
最近更新