我正在为webapp创建标题部分。我难以按照应有的方式对齐和定位事物。
您在右侧看到的注销按钮应向上移动到浅灰色区域。换句话说,就像徽标一样。这是该部分的html:
<div>
<img src="Images/logo.png" id="imgLogo" alt="" />
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>
这些元素的CSS:
#imgLogo{
margin: 0 auto;
display: block;
}
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
我做错了什么?我该怎么做才能让该登记按钮更多地移动到顶部? 提前谢谢!
答案 0 :(得分:4)
对于img徽标,我会创建一个div元素并将其作为背景,如下所示:
#imglogo{
background: url('Images/logo.png') no-repeat;
}
然后对于退出按钮,我会把它放在div里面,如下:
<div id="imglogo">
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>
我希望有所帮助。
答案 1 :(得分:4)
如果设置
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
到
#imgLogout{
position: absolute;
top: 4px;
right: 10px
}
这会把它放在你想要的地方。
答案 2 :(得分:1)
您应该为每个元素设置宽度。第二个img应该有
display: block
。
或者你可以使用类似的东西
#imgLogout{
float: right;
margin-top: 4px;
margin-right: 10px;
}
#imgbg {
background-image: url(Images/logo.png);
background-position: 50% 50%;
background-repeat: no-repeat;
}
<div id="imgbg">
<img src="Images/logout-idle.png"
alt=""
id="imgLogout"
onmouseover="this.src='Images/logout-hover.png'"
onmouseout="this.src='Images/logout-idle.png'"
onmousedown="this.src='Images/logout-down.png'"
/>
</div>