如何對齊這些HTML組件？

Question

我有2個視圖，一個用於登錄，一個用於注銷。 我認為退出的視圖是可以的：

登錄后，組件無法正確對齊，可以看到用戶圖片顯示在左側太遠：

你能告訴我我需要做些什么來實現更加一致的圖形嗎？ 我認為用戶圖片和徽標應該對齊。 代碼是：

<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">&nbsp;|&nbsp;</span><a href="/">Home</a><span style=
            "color:#99ccff">&nbsp;|&nbsp;</span> <a href="/ai">Insert
            ad</a><span style="color:#99ccff">&nbsp;|&nbsp;</span> <a href=
            "/tamil_nadu">Search for ads</a><span style=
            "color:#99ccff">&nbsp;|&nbsp;</span> <a href=
            "/li?t=w">Wanted</a><span style="color:#99ccff">&nbsp;|&nbsp;</span>
            <a href="/auth/logout">Log out</a>
        </div>
    </div>
</div>

我應該刪除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 }

提前感謝您的任何回答或評論

Answer 1

將圖像放在錨標記內，而不是在其外部。

Answer 2

你有margin-left: -7px在.nav然后用margin-left: 8px反對它margin-left: 8px在nav div里面的錨標簽上，但是從來沒有用img這樣做。

你可以擺脫.nav中的-7px左邊距還是你有其他原因嗎？