问题....................
来源：4-10 align-self属性
酷酷的Nian
2018-12-21 16:55:21
鼠标经过a标签的时候显示底边框，可是父级高度会发生改变，加入margin负值后，为什么底边框显示在外边了？不应该是在a标签里面么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
header{
width:100%;
background-color:#000;
}
header::after{
content:"";
width:0;
height:0;
display:block;
clear:both;
}
header ul{
float:left;
margin-left:600px;
}
header ul::after{
content:"";
display:block;
clear:both;
width:0;
height:0;
}
header ul li{
float:left;
}
header ul li a{
display:block;
color:#fff;
height:50px;
line-height:50px;
font-size:18px;
margin-right:60px;
}
header ul li a:hover{
border-bottom:2px solid #fff;
margin-bottom:-2px;
}
.container{
width:100%;
height:400px;
background-color:green;
}
</style>
</head>
<body>
<header>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">DYNAMIC</a></li>
<li><a href="#">INDUSTRY</a></li>
<li><a href="#">COLLABORATE</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</header>
<div class="container"></div>
</body>
</html>
1回答
-
好帮手慕星星
2018-12-21
margin-bottom设置负值应该是向下移动，不是向上移动，所以正确的应该是设置margin-top值，参考：
自己测试下，祝学习愉快！
0
相似问题