由于某些原因,我的注册链接无法在我的头中工作,如果有任何帮助,我们将不胜感激。
代码(在标题中):
<header>
<img src="PSE.jpg" height="100" width="250" alt="Logo" />
<div id="search"><input type="text" name="query" class="query" id="query" value="Search..." autocomplete="off">
<input class="button" type="submit" name="submit" value="Go"></div>
<div id="login">Login</div>
<div id="register"><a href="register.html">Register</a></div>
<form id="user"><input type="text" name="Username" value="Username"/>
<input type="password" name="Password" value="password"/></form>
<div id="facebook"><a><img src="facebook-icon.png" height="25" width="25" alt="facebook"/></a></div>
<div id="twitter"><a><img src="twitter-icon.jpg" height="25" width="25" alt="twitter"/></a></div>
<div id="youtube"><a><img src="youtube-icon.png" height="25" width="25" alt="youtube"/></a></div>
</header>
css:
header{
margin: 0 auto;
width: 100%;
height: 110px;
text-align: left;
display: block;
background-color:#268ACC;
}
header img{
text-align:left;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
}
#search {
text-align: left;
position: relative;
left: 300px;
bottom: 40px;
}
#user{
text-align: left;
position: relative;
left: 550px;
bottom: 60px;
}
#login{
text-align: left;
position: relative;
bottom: 40px;
left: 550px;
margin-top:-50px;
}
#register{
text-align: left;
position: relative;
bottom: 65px;
left: 710px;
}
#register a{
list-style-type: none;
margin: 0px;
text-decoration: none;
vertical-align: middle;
}
#facebook{
text-align: right;
position: relative;
bottom: 160px;
padding-right: 5px;
}
#twitter{
text-align: right;
position: relative;
bottom: 160px;
padding-right: 5px;
}
#youtube{
text-align: right;
position: relative;
bottom: 160px;
padding-right: 5px;
edit:现在添加了所有的头元素和css。只是为了添加一些细节,因为它希望我这样做,标题在左侧的图像中的布局,然后是搜索栏,然后是登录输入、社交媒体图像和我试图修复的注册链接。
由于相对定位,div被重叠。因此,只需将一个像9999
这样的高数字的z索引添加到相对定位的div中,如下所示:
#register{
text-align: left;
position: relative;
bottom: -20px;
left: 100px;
z-index: 9999;
}
它应该工作得很好。
您忘记设置div的宽度和高度。
试试这个:
#register{
text-align: left;
position: relative;
width: 100%;
height: 80px;
}
#register a{
list-style-type: none;
margin: 0px;
text-decoration: none;
vertical-align: middle;
}