CSS div对齐顶部

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和welcome)都是"对齐顶部"，但他们没有，->左一个#header在左div上方。

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>标签通常具有预定义的填充和其他属性，可以摆脱诸如间距之类的东西。

Answer 2

将float: left;分别放在两者上