关于浮动使用后父元素塌陷和居中问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | *{ 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 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧