3.23Css实现横向滑动

最新推荐文章于 2024-07-12 16:05:19 发布

觉非逸

最新推荐文章于 2024-07-12 16:05:19 发布

阅读量394

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_44625641/article/details/123688316

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需求：分项栏，实现往右滑动
在这里插入图片描述

  <!-- 分项区 -->
           <div class="menu">
        <div class="menu-item">
          <div class="menu-item-img">
            <img src="@/assets/images/wap-imgs/index/资源中心 拷贝@2x.png" />
          </div>
          <p>资源中心</p>
        </div>
        <!--  ......中间省略-->
        </div>
        <div class="menu-item">          
            <div class="menu-item-img">
              <img src="@/assets/images/wap-imgs/index/积分排行榜 拷贝@2x.png" />
            </div>
          <p>积分榜</p>
        </div>
      </div>

.menu::-webkit-scrollbar {
    display: none;
}//隐藏滑动条
.menu {
  max-width:400px; //固定宽，把栏块挤出去
  margin-top: 15px;
  margin-bottom:15px;
   display: flex;
  align-items: center;
   display: -webkit-box;   //不可缺少项
  justify-content: space-around;
  overflow-x: auto; //横向滑动
  .menu-item {
    width: 80px; //设定固定宽
    text-align: center;
  }
}