横向滚动条导航的实现（纯css）

水深无声 2022-09-05 12:53 279阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .a{width:100%; white-space: nowrap; overflow-y: hidden ; overflow-x: scroll; display: flex; 
          
          }
          .b{padding: 10px 20px; margin:0 10px; background-color: red; color:#fff;text-align: center;}
      </style>
    </head>
    <body>
       <div class="a">
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
         <div class="b">第一张</div>
       </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp实现横向滚动样式条

uniapp实现横向滚动样式条简介：本文讲解，uniapp如何实现横向滚动样式条。运行代码： <template> <view class="c

ゞ浴缸里的玫瑰/ 2024年03月31日 09:19/ 0 赞/ 60 阅读

相关 css横向滚动列表

![在这里插入图片描述][20200413164239281.gif_pic_center] <ul class="video_list"> <li>

朱雀/ 2023年07月25日 08:45/ 0 赞/ 168 阅读

相关 div实现可以滚动但不显示滚动条（纯CSS实现）

div实现可以滚动但不显示滚动条（纯CSS实现）想要的效果实现效果的核心代码参考想要的效果想实现滚动效果但是又不想显示滚动条，如下面两

比眉伴天荒/ 2023年01月19日 03:06/ 0 赞/ 558 阅读

相关微信小程序写横向滚动条导航栏

wxml <view class="title-menu"> <view class="title-menu-item active"> 全部

电玩女神/ 2022年12月13日 09:53/ 0 赞/ 279 阅读

相关 CSS3实现文字横向滚动

上效果图： ![在这里插入图片描述][20210609141329914.gif_pic_center] 上代码： <div id="tips" :style=

短命女/ 2022年10月05日 13:49/ 0 赞/ 260 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 259 阅读

相关横向滚动条导航的实现（纯css）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

水深无声/ 2022年09月05日 12:53/ 0 赞/ 280 阅读

相关 css实现滚动条

<!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

系统管理员/ 2022年05月14日 10:18/ 0 赞/ 274 阅读

相关不可思议的纯 CSS 滚动进度条效果

结论先行，如何使用 CSS 实现下述滚动条效果？ [![scrollbar][]][scrollbar 1] 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。在

小咪咪/ 2022年01月30日 11:19/ 0 赞/ 290 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 478 阅读