为什么nav浮动没有剧中

header{height:100px; background:black;

width:1000px;

margin:0 auto;

}

header a{

text-decoration:none;

margin:30px 180px;

float:left;

font-size:25px

}

*{color:red; margin:0;

padding:0;

}

nav{

float:right;

}

nav a{float:left;

height:80px;

line-height:80px;

text-align:center;

display:black;

margin:0px;

width:70px;

}

源自：项目：H5布局 2-2 编程练习

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-04-18 09:34:29

你好同学，是说的如下的> 吗？

它的作用是选择header下面的直系子元素，不包含孙子元素。例如当使用 header a时，它会选择header下面的所有的a标签。那么导航nav里面的a也会受到这里面样式的影响，间距很大，导致导航样式都乱了

而使用header>a只会选择header的子元素，那么nav里面的a标签是孙子元素，不会被选中，所有不会受到样式的影响，自然能够达到效果哦。

祝学习愉快，望采纳。

好帮手慕夭夭 2019-04-17 11:21:43

你好同学，没有上传html代码，建议同学把完整的代码粘贴上来，以便老师针对代码准确高效的帮助你解决问题。

祝学习愉快！

提问者早知今日何必当初 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link href="nav.css" rel="stylesheen" type="text/css"> </head> <body>  <header> <a href="www.baidu.com"> <img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"/> wwooc </a> <nav> <a class="r">red</a> <a class="y">yellow</a> <a class="g">green</a> <a class="p">purple</a> <a class="o">orange</a> <a class="b">blue</a> </nav> </header> </body> </html> 老师這个是html5

2019-04-17 21:57:07
提问者早知今日何必当初 #2

*{color:white; margin:0; padding:0;} header{height:100px; background:black; width:1500px; margin:0 auto; font-size:25px } header > a{ text-decoration:none; margin:30px 300px; float:left; } header nav{ float:right; } nav a{ line-height:90px; font-size:25px; height:90px; width:80px; float:left; text-align:center; } .r{background:red;} .y{background:yellow;} .g{background:green;} .p{background:purple;} .o{background:orange;} .b{background:blue; margin-right:200px; } 老师已经解决，加了个>符号，能帮我解释下>的作用吗

2019-04-17 22:25:12