导航栏之间有缝隙
来源：2-2 编程练习
谜亚星
2019-10-26 21:11:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style type="text/css">
*{margin:0;padding:0;}
header{width:100%;height:80px;background-color:#000;}
.logo{float:left;margin:20px 25px;color:#fff;}
a { text-decoration: none; }
nav{float:right;}
nav a{font-size:24px;line-height:73px;display:inline-block;width:110px;height:73px; text-align:center;color:#fff;}
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover{ padding-bottom: 7px; }
</style>
</head>
<body>
<!-- 在此完成网页的HTML代码-->
<header>
<div class="container">
<div class="logo">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png">imooc</a>
</div>
<nav>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</nav>
</div>
</header>
</body>
</html>老师好，请问为什么导航栏之间有缝隙，还有，logo之后的文字该怎么设置字体大小和颜色
写回答
1回答
-
樱桃小胖子
2019-10-27
1、导航有缝隙是因为导航设置了display:inline-block;导致的，建议使用float: left代替display:inline-block;
2、logo右侧字体设置字体和颜色方法如下：
希望可以帮到你！
0
相似问题