css实现超出屏幕宽度横向滚动

最新推荐文章于 2025-09-24 14:56:36 发布

原创最新推荐文章于 2025-09-24 14:56:36 发布 · 7.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

css

7 篇文章

订阅专栏

博主在写页面时遇到一个效果需求，即一个div里有四个小div横向排列，其宽度总和超出屏幕宽度，需实现四个小div左右横向滑动，博主表示代码简单并将记录相关代码。

最近在写页面时遇到这样一个效果，一个div里面有四个小的div横向排列，四个小div的宽度加起来超出了屏幕宽度，要求四个小div可以左右横向滑动。代码其实很简单，记录如下：

  <div class="scrollTest">
      <div class="box" v-for="(item, index) in list"></div>
  </div>
    .scrollTest{
    height: 300px;
    white-space: nowrap;
    overflow-x: scroll;
    // 隐藏滚动条
    &::-webkit-scrollbar{
      display: none;
    }
    .box{
      display: inline-block;
      width: 150px;
      height: 200px;
      border: 1px solid red;
      margin-left: 15px;
      box-sizing: border-box;
    }
  }