子元素的宽度大于父元素的宽度，子元素的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>上一篇： body有无position:relative对相对于其定位的元素的影响
下一篇： 异常的相关内容