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

水深无声 2022-09-05 12:53 297阅读 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 条评论，297人围观）

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

相关阅读

相关纯css导航滚动阴影

body { margin: 0; padding: 0; }

àì夳堔傛蜴生んèń/ 2024年04月07日 12:26/ 0 赞/ 79 阅读

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

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

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

相关如何使用CSS实现一个纯CSS的滚动条样式？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现自定义滚动条样式 ⭐ 写在最后 -------------------- ⭐ 专栏简介

Bertha 。/ 2023年10月14日 20:02/ 0 赞/ 34 阅读

相关 CSS实现移动端横向滚动导航条，仿今日头条滚动导航

应用场景现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例：今日头条 ![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29t

爱被打了一巴掌/ 2023年07月25日 08:44/ 0 赞/ 16 阅读

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

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

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

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

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

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

相关 CSS3实现文字横向滚动

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

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

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

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

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

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

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

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

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

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

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