css横向滚动列表

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

在这里插入图片描述

  1. <ul class="video_list">
  2.   <li>
  3.      <img src="@/assets/video.png" alt="视频展示页" />
  4.      <img src="@/assets/play.png" alt="播放">
  5.    </li>
  6.    <li>
  7.      <img src="@/assets/video.png" alt="视频展示页" />
  8.      <img src="@/assets/play.png" alt="播放">
  9.    </li>
  10.    <li>
  11.      <img src="@/assets/video.png" alt="视频展示页" />
  12.      <img src="@/assets/play.png" alt="播放">
  13.    </li>
  14.    <li>
  15.      <img src="@/assets/video.png" alt="视频展示页" />
  16.      <img src="@/assets/play.png" alt="播放">
  17.    </li>
  18.  </ul>
  20. .video_list { 
  21.   margin: 0 rem(25);
  22.   white-space: nowrap;
  23.   overflow-x: auto;
  24.   overflow-y: hidden; li { 
  25.     margin-right: rem(25);
  26.     width: rem(450);
  27.     height: rem(240);
  28.     display: inline-block;
  29.     border-radius: rem(24);
  30.     overflow: hidden;
  31.   }
  32.   li:nth-last-child(1) { 
  33.     margin-right: 0;
  34.   }
  35. }
  36. /* 消除滚动条 */
  37. .video_list::-webkit-scrollbar{ 
  38.   display: none;
  39. }

发表评论

表情：
评论列表 （有 0 条评论，236人围观）

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

相关阅读