为什么nav设置右浮动会再header下面?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <style type="text/css"> header{ width:100%; height:100x; background-color:black; } a{ color:white; text-decoration:none; } span{ color:white; } nav{ float:right; display:inline; } </style> </head> <body> <header> <div> <a href="#1" alt="logo"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"><span>MYMOOC</span></a> </div> <nav> <a href="#2" class="red">Home</a> <a href="#3" class="yellow">Course</a> <a href="#4" class="green">Actual</a> <a href="#5" class="purple">Plan</a> <a href="#6" class="orange">FAQ</a> <a href="#7" class="blue">Notes</a> </nav> </header> </body> </html>
7
收起
正在回答
1回答
同学你好,因为nav前面还有一个div,div是块元素,默认是自占一行的。如果想要两个块元素在同一行显示,需要同时设置浮动。
这里给前面的div设置浮动:
另外,如下单位书写不正确:
改成px:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星