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

最新推荐文章于 2024-03-24 03:21:27 发布

s先生的d小姐

最新推荐文章于 2024-03-24 03:21:27 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

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

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

CSS 专栏收录该内容

20 篇文章

订阅专栏

这篇博客探讨了如何使用CSS来创建一个具有横向滚动条的HTML布局。通过在最外层`div.tab-box`设置宽度并启用`overflow-x:scroll`，配合`.tab-one`的`white-space:nowrap`属性，可以使得内容在一行内水平滚动。同时，文章还强调了在使用`nowrap`时，第三层元素不应设置`float`属性，以及如果需要使用`float`实现横排，需确保`.tab-one`有足够的宽度容纳所有元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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设置一个很大的宽度容下所有第三层元素 )