老师,为什么我的底部导航的ul没有高度呢,而且设置了居中没有效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .container{padding-top: 100px;} .container img{display: block;width: 100%;} .nav{width: 100%;height: 100px;background-color: black;position: fixed;} .nav img{display: block;float: left;margin-left: 5%;} ul{list-style-type: none;line-height: 100px;font-size: 22px;font-family: "微软雅黑";} .nav ul{float: right;margin-right:5%; } li{float: left;margin:0 30px;} a{color: white;} .foot{width: 100%;height: 100px;background-color: black;} .foot ul{margin: 0 auto;} </style> </head> <body> <div class="nav"> <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a> <ul> <a href="#"><li>课程</li></a> <a href="#"><li>职业路径</li></a> <a href="#"><li>实战</li></a> <a href="#"><li>猿问</li></a> <a href="#"><li>手记</li></a> </ul> </div> <div class="container"> <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/> <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" /> <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/> </div> <div class="foot"> <ul> <a href="#"><li>网址首页</li></a> <a href="#"><li>企业合作</li></a> <a href="#"><li>人才招聘</li></a> <a href="#"><li>联系我们</li></a> <a href="#"><li>常见问题</li></a> <a href="#"><li>友情链接</li></a> </ul> </div> </body> </html>
1
收起
正在回答
1回答
同学你好,关于同学的疑问解答如下:
1、ul没有居中是因为没有给ul设置宽度,建议参考如下:
2、不是很理解同学说的底部导航没有高度是什么意思,建议详细描述一下
3、css中如下设置属于全局设置,也就是说,nav里面的ul li a和foot里面的ul li a都能继承里面的样式
4、标签嵌套错误,ul和li是组合标签,及ul里面嵌套的是li标签,li标签里面嵌套a标签才是正确的,参考如下:
如果我的回答帮助了你,望采纳,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星