CSS 实现横向滚动 h5

复制代码查看效果 建议使用手机模型预览

<!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>滑动</title>
    <style>
        .lateral-sliding {
            display: flex;
            overflow-y: hidden;
            overflow-x: scroll;
        }
        .lateral-sliding-item {
            display: flex;
            margin-right: 8px;
        }
        .nav {
            background: #dcdcdc8f;
            text-align: center;
            margin: 0 2px;
            font-size: 15px;
            padding: 8px 24px;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .nav-checked{
            background: #07c160;
            color: white;
            text-align: center;
            margin: 0 2px;
            font-size: 15px;
            padding: 8px 24px;
            border-radius: 4px;
            flex-shrink: 0;
        }

    </style>
</head>
<body>

    <div class="lateral-sliding">
        <div class="lateral-sliding-item" >
          <div class="nav">导航按钮1</div>
          <div class="nav">导航按钮2</div>
          <div class="nav">导航按钮3</div>
          <div class="nav-checked">导航按钮4</div>
        </div>
      </div>

    
</body>
</html>

在这里插入图片描述

版权声明：本文为qq_35525955原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。