css横向滚动列表

朱雀 2023-07-25 08:45 168阅读 0赞

![在这里插入图片描述][20200413164239281.gif_pic_center]

<ul class="video_list">
      <li>
         <img src="@/assets/video.png" alt="视频展示页" />
         <img src="@/assets/play.png" alt="播放">
       </li>
       <li>
         <img src="@/assets/video.png" alt="视频展示页" />
         <img src="@/assets/play.png" alt="播放">
       </li>
       <li>
         <img src="@/assets/video.png" alt="视频展示页" />
         <img src="@/assets/play.png" alt="播放">
       </li>
       <li>
         <img src="@/assets/video.png" alt="视频展示页" />
         <img src="@/assets/play.png" alt="播放">
       </li>
     </ul>

.video_list { 
      margin: 0 rem(25);
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden; li { 
        margin-right: rem(25);
        width: rem(450);
        height: rem(240);
        display: inline-block;
        border-radius: rem(24);
        overflow: hidden;
      }
      li:nth-last-child(1) { 
        margin-right: 0;
      }
    }
    /* 消除滚动条 */
    .video_list::-webkit-scrollbar{ 
      display: none;
    }

[20200413164239281.gif_pic_center]: /images/20230528/89eb86c095cf418eaf06bfb814364f2e.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css横向滚动列表

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

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

相关 uniapp横向滚动

<template> <view> <scroll-view scroll-x="true" calss="scroll_view">

落日映苍穹つ/ 2023年01月11日 09:12/ 0 赞/ 259 阅读

相关公告栏横向滚动

<div class="gonggao"> <i class="icon iconfont icon-laba"></i> <marquee scr

偏执的太偏执、/ 2022年12月27日 12:51/ 0 赞/ 226 阅读

相关 css3 文字横向无缝滚动

<div class="notice-container"> <div class="header-notice-marquee" id="notice-

悠悠/ 2022年10月25日 01:24/ 0 赞/ 344 阅读

相关 CSS3实现文字横向滚动

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

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

相关移动端横向滚动

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

朱雀/ 2022年10月02日 14:55/ 0 赞/ 200 阅读

相关 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 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 437 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

绝地灬酷狼/ 2022年06月11日 00:44/ 0 赞/ 308 阅读