CSS格對齊頂部

Question

我的代碼：

<div id="container"> 
<div id="header"> 
<h1>Hello.</h1> 
</div> 
<div id="welcome" > 
<a href="/eciepecie">Login</a> 
</div></div> 

#welcome{ 
color: #333333; 
font-size: 90%; 
float: right; 
text-align: right; 
padding-right: 30px; 
} 
#header{ 
padding: 10px 20px; 
width: 400px; 
} 
#header h1 { 
line-height:20px; 
float: left; 
background: #ffffff url('../img/hello.png') no-repeat left; 
color: #222222; 
padding: 0px 30px; 
} 

我希望雙方的div（標題和歡迎）是「頂部對齊」，但他們都沒有， - >左邊一個的#header高於左格。

Answer 1

我刪除了圍繞「Hello」的<h1>標籤。並進行了如下修改：

#welcome{ 
    color: #333333; 
    font-size: 90%; 
    padding-top: 10px; 
    text-align: right; 
    padding-right: 30px; 
} 

#header{ 
    padding: 10px 20px; 
    width: 400px; 
    float: left; 
} 

<h1>的標籤典型地具有預定的填充，並且可以甩開之類的東西間距其它性質。

Example

Answer 2

把float: left;放在它們兩個上。