通过css在网页中实现容器内元素横向滚动

03月/16日/CSS教程/浏览 556

网页中元素默认是纵向排列的,我们可以通过css属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。


基础结构如下:


    <div class="scroll-box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      .
      .
      .
    </div>

item可以根据实际需要增加更多


横向浮动,隐藏,滑动相关css如下:


.item {
    width: 100px;
    height: 60px;
    line-height: 60px;
    white-space: nowrap;
    display: inline-block;
}

.scroll-box {
    text-align: center;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}


如果需要隐藏滚动条,通过控制伪类,增加以下css即可 


.scroll-box::-webkit-scrollbar {
    display: none;
}


发表评论

暂无评论,抢个沙发...

客服 工单