欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-25 11:38:09
...

子元素的宽度大于父元素的宽度,子元素的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 position