为什么<a class=“test”>标签不能达到盒子顶部边缘,而<input type="text" class="head-search"却可以
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿豆瓣</title>
<style>
*{margin:0px;padding:0px;
}
a{text-decoration: none;
}
li{list-style-type:none;
}
img,input{
border:none;
border:1px solid none;
}
#head{
width:1152px;
height:88px;
border:solid 1px red;
margin:0px auto;
position:relative;
}
#head .head-logo{background:url(../images/logo.png);
display: block;
width:158px;height:31px;
position:absolute;
left:0px;
top:29px;
}
#head .head-search{
width:272px;height:32px;
border:1px solid #c3c3c3;
position:relative;
left:185px;top:0px;
color:#e4e4e4;
}
#head .test{
display: block;
color:red;
position:relative;
left:0px;
top:0px;
}
a {color:#d5e1e7;
}
a:hover{
background-color: #4b83af
}
</style>
</head>
<body>
<div id = "head">
<a class="head-logo" href="#"></a>
<form >
<input type="text" class ="head-search" placeholder="书籍，电影，音乐，小组，小站，成员"/ >
</form>
<a class="test" href="#">123</a>
</div>
</body>
</html>
慕粉35412991回答
-
千秋此意
你两个都给的relative，相对定位的元素不会脱离标准文档流 所以飘不上去，相对定位是相对自身原来的位置定位 所以你给top:0和left：0相当于保持原来我位置不变
随时随地看视频慕课网APP
Html/CSS