老师，为什么nav部分每个方框之间有间隔呢，不是紧挨着
来源：2-2 编程练习
慕姐8246796
2020-04-09 18:02:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>
<nav>
<a href="#" class="HOME active">HOME</a>
<a href="#" class="COURSE">COURSE</a>
<a href="#" class="ACTUAL">ACTUAL</a>
<a href="#" class="PLAN">PLAN</a>
<a href="#" class="FQA">FQA</a>
<a href="#" class="NOTES">NOTES</a>
</nav>
</div>
</header>
<!-- 在此完成网页的HTML代码-->
</body>
</html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
header{
height: 80px;
background-color: #000;
}
header .container{
width: 1200px;
margin: 0 auto;
}
header .container a{
display: block;
float: left;
}
header .container nav{
float: right;
}
header .container nav a{
font-size: 24px;
height: 73px;
width: 110px;
display: block;
float: left;
line-height: 73px;
text-align: center;
color: #fff;
}
header .container nav a.HOME{background-color: #433b90}
header .container nav a.COURSE{background-color: #017fcb}
header .container nav a.ACTUAL{background-color: #78b917}
header .container nav a.PLAN{background-color: #feb800}
header .container nav a.FAQ{background-color: #f27c01}
header .container nav a.NOTES{background-color: #d40112}
header .container nav a:hover,
header .container nav a.active{
padding-bottom: 7px;
}/*在此完成CSS样式设置*/
1回答
-
好帮手慕码
2020-04-09
同学你好，请问是说当a标签去掉display: block;、float: left;属性之后，之间有间隙是吗？
是因为内联标签本身存在的间隙导致的。可以将它变成块级标签，这样就可以消除间隙了。
祝学习愉快~
0
相似问题