子元素的宽度大于父元素的宽度，子元素的css样式设置

如代码部分所示，对于ul中li下的img 实际宽度为1920px，实际高度为420px，而一般情况下，浏览器的视口只有1300px不等，所以，浏览器产生横向滚动条，那么，该如何解决呢？
首先，对于ul下的li，要使得其中的img元素宽高设置为本来的1920*420，然后，ul的宽度则是1920*n（n为li的个数）这样让li浮动起来以后，我们可以看到，浏览器产生横向滚动条，原因是，ul的长度超出了浏览器视口的长度。所以，应该在ul外层盒子.wrappe上加cs样式
那么，该怎么搞？我们知道，产生横向滚动条是因为横向移除即，默认的overflow的值为auto，当高度或者宽度超出浏览器视口是则会产生滚动条，此时设置，overflow的值为hidden，即就是，隐藏溢出部分。此时，我们发现，浏览器的滚动条消失了，但是网页在放大过程中，我们发现图片，并不是居中的。
为了解决这个问题，我们为盒子添加绝对定位，并且使得它水平居中。该如何实现呢，我们知道文本类的元素，我们可以为包裹他的盒子添加text-align:center，他会水平居中，盒子该怎么实现？绝对定位，定位到的是浏览器视口的水平中点，我们看以下代码：

`.wrapper{
            width:1920px;
            margin:0 auto;
            overflow: hidden;
            position: absolute;
            left:50%;
            margin-left:-960px;

        }`

这段代码，.wrapper变为定位元素，它相对于浏览器视口进行定位，首先是left:50%，margin-left变为其宽度的一半，此时，我们发现，浏览器视口的中心点与我们元素的中心点重合，设置成功。网页放大缩小时，是以中心点为原点，，进行缩放的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
    body,ul,ol{
                padding: 0;
                margin:0;
            }

     body{
        overflow: hidden;
     }
        a {
            text-decoration:none;
        }
        .wrapper{
            width:1920px;
            margin:0 auto;
            overflow: hidden;
            position: absolute;
            left:50%;
            margin-left:-960px;

        }
        ul{ 
            width:13440px;
            list-style:none;
            left:0;
        }
        li{
            width:1920px;
            height:420px;
            float:left;

        }
        #button{
            width:1090px;
            margin:0 auto;
            position:relative;
        }
        #one,#two{
            cursor:pointer;
        }
        #button #one{
            position: absolute;
            top:180px;
            left:200px;
            z-index: 5;
        }
        #button #two{
            position: absolute;
            top:180px;
            left:990px;
            z-index:5;
        }
    </style>

</head>
<body>
    <div id="button">
            <img id="one" class="button" src="./images/轮播翻页按钮_左.png" alt="">
            <img id="two" class="button" src="./images/轮播翻页按钮_右.png" alt="">
    </div>
    <div class="wrapper">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
        </ul>
    </div>

</body>
</html>

子元素的宽度大于父元素的宽度，子元素的css样式设置

子元素的宽度大于父元素的宽度，子元素的css样式设置

猜你喜欢