[英]How can I align these HTML components?
I've got 2 views, one for logged in and one for logged out. 我有2个视图,一个用于登录,一个用于注销。 The logged out view I think is OK:
我认为退出的视图是可以的:
When logged in, the components do not align properly, as can be seen the user picture displays too far to the left: 登录后,组件无法正确对齐,可以看到用户图片显示在左侧太远:
Can you tell me what I need to do to achieve more aligned graphics? 你能告诉我我需要做些什么来实现更加一致的图形吗? I think the user picture and the logo should be aligned the same.
我认为用户图片和徽标应该对齐。 The code is:
代码是:
<div id="header">
<a id="logo" href="/" name="logo"><img src="/_/img/kool_business.png" height="80"
title="Koolbusiness.com" alt="Koolbusiness.com" /></a>
<div id="page_name" class="ctext1">
<div class="ctext2">
<div class="ctext3">
For sale
</div>
</div>
</div>
<div id="line"></div>
</div>
<div id="container_main">
<div class="navbar">
<div style="float:left; margin-top:6px;">
<img src=
"https://graph.facebook.com/327400016/picture?type=small" /><a href=
"/user/niklas-rosencrantz">Niklas Rosencrantz</a><span style=
"color:#99ccff"> | </span><a href="/">Home</a><span style=
"color:#99ccff"> | </span> <a href="/ai">Insert
ad</a><span style="color:#99ccff"> | </span> <a href=
"/tamil_nadu">Search for ads</a><span style=
"color:#99ccff"> | </span> <a href=
"/li?t=w">Wanted</a><span style="color:#99ccff"> | </span>
<a href="/auth/logout">Log out</a>
</div>
</div>
</div>
Should I just remove the style:"float:left; margin-top:6px
or what do you think I should do the present the layout smoother? The CSS for my page is 我应该删除
style:"float:left; margin-top:6px
或者您认为我应该做什么,目前布局更平滑?我的页面的CSS是
#header {
margin-left: 26px;
margin-top: 16px;
width: 790px;
height: 70px;
}
#logo,
#page_name {
float: left;
height: 50px;
}
#page_name {
font-size: 14px;
vertical-align: middle;
width: 250px;
}
#logo { margin-right: 26px }
.navbar {
margin: 5px 0 10px -7px;
overflow: hidden;
}
.navbar a,
.navbar a:visited,
.navbar a:link {
margin-top: 5px;
margin-left: 8px;
margin-right: 8px;
font-size: 14px;
color: #336699;
text-decoration: none;
}
.navbar a:hover { text-decoration: none }
.navbar a:active { text-decoration: underline }
Thanks in advance for any answer or comment 提前感谢您的任何回答或评论
将图像放在锚标记内,而不是在其外部。
You have margin-left: -7px
on .nav
and then counter-act it with margin-left: 8px
on the anchor tags inside the nav div, but never do so with the img
. 你有
margin-left: -7px
在.nav
然后用margin-left: 8px
反对它margin-left: 8px
在nav div里面的锚标签上,但是从来没有用img
这样做。
Can you get rid of the -7px left margin in .nav
or do you have it there for another reason? 你可以摆脱
.nav
中的-7px左边距还是你有其他原因吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.