跟着老师一起敲的代码，为啥没有在整个网页中居中呢
来源：3-3 Float案例演示（3）
Leonard_
2019-05-29 21:13:53
6回答
-
同学你好！
在上一个回答中已经说到了~
类名container后面多了一个：影响样式生效了哦：
删除之后就可以实现了哟：
如果帮助到了你 欢迎采纳 祝学习愉快~
0 -
Leonard_
提问者
2019-05-30
<!DOCTYPE html>
<html>
<head>
<title>Float案例实现导航</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.container:{
width: 1200px;
margin: 0 auto;
}
/*父容器里采用第二种方法清除子元素的浮动*/
.header{
width: 1200px;
background: #ccc;
overflow: hidden;
zoom:1;
}
.header .logo{
width: 200px;
height: 80px;
float: left;
margin: 0 40px;
}
.header .nav{
padding-right: 40px;
float: right;
overflow: hidden;
zoom:1;
}
.header .nav li{
float: left;
margin-right: 20px;
}
.header .nav li a{
padding: 0 20px;
height: 80px;
line-height: 80px;
font-family: "微软雅黑";
font-size: 16px;
color: #333;
}
.header .nav li a:hover{
color:#fff;
}
.main, .footer{
font-size: 22px;
color: #fff;
}
.main{
width: 1200px;
overflow: hidden;
zoom:1;
}
.main .con{
width: 1000px;
height: 500px;
background: blue;
float: left;
}
.main .sidebar{
width: 200px;
height: 500px;
background: orange;
float: left;
}
.footer{
width: 1200px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="img/logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="con">content</div>
<div class="sidebar">sidebar</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
0 -
好帮手慕码
2019-05-30
同学你好！
比对了下同学的代码和源码：同学没有写这一块的清除浮动
且同学的代码中这里多了一个：，可能会导致样式不生效
同学可以看一下~
如果还是不可以，建议同学将全部代码粘贴到问答区进行提问（不要截图），以便老师准确的为同学分析问题所在哦~
如果帮助到了你 欢迎采纳 祝学习愉快~
0h019-05-30 -
Leonard_
提问者
2019-05-30
代码截图如下
0 -
好帮手慕码
2019-05-30
同学你好！
建议同学将代码粘贴至问答区进行提问哦，光看同学的效果截图是看不出来问题所在的。也可以参考一下“陌灬路人”同学的建议~
如果帮助到了你 欢迎采纳 祝学习愉快~
0h019-05-30 -
陌灬路人
2019-05-29
你没有给父元素添加浮动清除
给父元素div为.main添加浮动清除
{
overflow:hidden;
zoom:1;
}
0h019-05-30
相似问题