关于浮动使用后父元素塌陷和居中问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>尔雅通识课-南华大学网络教学平台</title> <link rel="stylesheet" type="text/css" href="../css/test.css"> </head> <body> <div class="page"> <div class="header"> <div><img src="../image/logo.png"></div> </div> <div class="nav"> <ul> <li class="common first"><a href="#">首页</a></li> <li class="common"><a href="#">国家级精品课程</a></li> <li class="common"><a href="#">省级精品课程</a></li> <li class="common"><a href="#">校级精品课程</a></li> <li class="common"><a href="#">在线开放课程</a></li> <li class="common"><a href="#">课程总揽</a></li> <li class="common"><a href="#">教学计划</a></li> <li class="common"><a href="#">公告通知</a></li> </ul> <div class="clear"></div> </div> <div class="search"></div> <div class="main"></div> <div class="footer"></div> <script type="text/javascript"> </script> </div> </body> </html>
css
*{
margin:0;
padding:0;
}
.header{
width: 100%;
height: 112px;
text-align: center;
background: url(../image/header_bg.png)
no-repeat
rgb(225,225,225)
45% 50%;
}
.header div{
padding-top: 23.5px;
width: 500px;
margin-left: 180px;
}
.nav{
height: 44px;
width: 100%;
background-color: #547B54;
}
.nav ul{
list-style-type: none;
width: 100%;
width: 624px;
margin:0 auto;
}
.nav ul li{
color: white;
float: left;
line-height: 44px;
display: inline-block;
}
.nav .clear{
clear: left;
}
.nav ul li a{
color: white;
text-decoration-line: none;
}请问一下老师1.为什么清除浮动之后父元素还是塌陷的呢？
2.为li设置浮动之后，可以用哪些方法让li居中，我试了给ul添加text-align：center但是没有效果，最后是将li所有宽度加起来并且把ul设置成这个宽度在用margin实现的，但是一个个加确实有点麻烦，问一下老师有别的解决方案么？
20
收起
正在回答
2回答
你好，1、说的是nav这个元素吗？清除元素之后没有塌陷呀，有很好的显示（我这里是把nav的高度去掉之后测试的，是可以的哦），如果不是这个元素，请具体指出是哪个元素。
2、这里给ul设置text-align:center没有生效是因为li设置的浮动的原因，这里也可以把li的浮动去掉，直接设置 display: inline-block;然后在设置ul的text-align:center属性。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星