实现div横向排列不换行并能滚动展示

最新推荐文章于 2024-09-19 16:03:40 发布

s先生的d小姐

最新推荐文章于 2024-09-19 16:03:40 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44326389/article/details/125535663

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.html

<div class="tab-box">
        <div class="tab-one">
            <div v-for="(item, index) in ['1','2','3']" :key="index">
              <span @click="changeOne(item)">
                {{ item.departmentDescr }} 
              </span>
          </div>
        </div>
</div>

2.css

.tab-box{
   height: 62px;
   line-height: 62px;
   width: calc(100vw - 40px);
   padding: 0 20px;
   overflow-y: hidden ;
   overflow-x:scroll;
   &::-webkit-scrollbar{
      display: none;
   }
   .tab-one{
     white-space:nowrap;
     div{
      display: inline-block;
     }
   }
}

注意：
在最外层div .tab-box 设置宽度且overflow-x:scroll

在第二层div .tab-one不设置宽度且white-space:nowrap

在第三层元素随意设置宽度

(如果用nowrap时候第三层元素不能设置float)

(如果用非要第三层元素设置float实现横排的话 .tab-one设置一个很大的宽度容下所有第三层元素 )