HTML/CSS

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

阿里云

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

基础结构如下:

也想出现在这里?联系我们
创客主机
  1.     <div class="scroll-box">
  2.       <div class="item">1</div>
  3.       <div class="item">2</div>
  4.       <div class="item">3</div>
  5.       <div class="item">4</div>
  6.       <div class="item">5</div>
  7.       .
  8.       .
  9.       .
  10.     </div>

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

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

  1. .item {
  2.     width: 100px;
  3.     height: 60px;
  4.     line-height: 60px;
  5.     white-space: nowrap;
  6.     display: inline-block;
  7. }
  8.  
  9. .scroll-box {
  10.     text-align: center;
  11.     white-space: nowrap;
  12.     overflow-x: scroll;
  13.     overflow-y: hidden;
  14. }

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

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

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

已有 208 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!