html - DIV 未显示在页面顶部

Question

我创建了一个基本布局，页面上有 2 个链接，一个注册按钮和一个登录按钮。

查看我的 jsfiddle 链接，了解它的外观。有一个黑色方框，它将是 Logo ，您会看到绿色和蓝色方框，它们是我的按钮。

我需要将它们放在页面顶部。

http://jsfiddle.net/4EZa5/

不确定我需要对 CSS 做些什么才能使链接位于页面顶部？

HTML:

<div id="accountLinks">
 <ul>
<li class="login"><a href="#">Log in</a></li>
<li class="register"><a href="#">Register</a></li>
</ul>
</div>

CSS:

#accountLinks{
float: right;
height:20px;
width: 170px;
margin: 0;
padding: 0;
 }
 #accountLinks ul{
list-style-type: none;
margin: 0;
padding: 0;
 }
 #accountLinks li{
float: left;
text-align: center;
 }
 #accountLinks .login{
background: url(../images/button_login.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;    
  }
 #accountLinks .register{
background: url(../images/button_register.gif) no-repeat;
width: 70px;
height: 20px;
color: #FFF;    
 }

谢谢

Answer 1

您的 H1 标签是一个 block 元素，并将其余元素向下推。只需添加 float: left;到 h1 CSS

h1{
width: 351px;
height: 49px;
background: #000;
text-indent: -9999px;
float: left;
}

仅在登录时设置链接样式:

#accountLinks .login a {
    color: #FFF;    
}
#accountLinks .login a:hover {
    color: yellow;    
}