老师,为什么导航部分有黑色的间隙?

来源:2-2 编程练习

elinor_0

2019-04-12 15:25:52

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title>IMOOC</title>

<style type="text/css" media="screen">

*{

margin: 0;

padding: 0;

color: white;

font-size: 20px;

}

header{

background-color: black;

width: 100%;

height: 100px;

}

header > .container{

             margin: 0 auto;

             width: 1000px;

}

a{

text-decoration: none;

display: block;

height: 100px;

line-height: 100px;

}

.container > a{

float: left;

}

nav{

float: right;

}

nav > a{

display: inline-block;

width: 90px;

height: 90px;

line-height: 90px;

text-align: center;

font-size: 16px;

}

nav > a.home{

background-color:#cc0000;

}

nav > a.course{

background-color: #ffff33;

}

nav > a.actual{

background-color: #99cc00;

}

nav > a.plan{

background-color: #9900ff;

}

nav > a.faq{

background-color: #cc6600;

}

nav > a.notes{

background-color: #6699ff;

}

</style>

</head>

<body>

<!--  在此完成网页的HTML代码-->

<header>

<div class="container">

<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png" alt=""></a>

<a href="#" >IMOOC</a>

<nav>

<a href="#" class="home">Home</a>

<a href="#" class="course">Course</a>

<a href="#" class="actual">Actual</a>

<a href="#" class="plan">Plan</a>

<a href="#" class="faq">FAQ</a>

<a href="#" class="notes">Notes</a>

</nav>

</div>

</header><!-- /header -->

</body>

</html>


写回答

1回答

好帮手慕码

2019-04-12

同学你好!

这是因为内联元素、内联块元素本身存在间隙,一般情况下设置为块级标签就可以了,

这里如果设置块级标签的话,a标签就不会横向排列了,

那么也可以设置浮动 也可以清除这个间隙:

http://img.mukewang.com/climg/5cb04ae0000155c605660306.jpg

http://img.mukewang.com/climg/5cb04aa70001334e06460194.jpg

如果帮助到了你欢迎采纳~祝学习愉快~

0

0 学习 · 40143 问题

查看课程