横向拉动内容 css实现

最新推荐文章于 2024-03-06 23:02:33 发布

赤子之心

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量303

点赞数 1

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/m0_53850109/article/details/122544800

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

横向拉动内容

方法：利用 overflow: auto; 来实现横向拉动，将内容盒子设置大于父盒子的宽度，使内容左浮动

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            left: 500px;
            width: 700px;
            height: 200px;
            overflow: auto;
        }
        
        ul {
            width: 600%;
        }
        
        ul li {
            float: left;
            list-style: none;
        }
        
        ul li img {
            width: 700px;
            height: 163px;
        }
    </style>
</head>

<body>
    <div>

        <ul>
            <li><img src="../images/two/1.jpg" alt=""></li>
            <li><img src="../images/two/2.jpg" alt=""></li>
            <li> <img src="../images/two/3.jpg" alt=""></li>
            <li><img src="../images/two/4.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>