DIV未顯示在頁面頂部

Question

我已經創建了一個基本布局，頁面上有2個鏈接，一個注冊和一個登錄按鈕。

看看我的jsfiddle鏈接，看看它的外觀。 有一個黑色的框將是徽標，您將看到綠色和藍色的框是我的按鈕。

我需要它們在頁面頂部。

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標簽是一個街區元素，其余的都在下推。 只需添加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;    
}

Answer 2

他們被按下的<h1>Salesboard</h1> -是否有可能以移動到剛剛accountLinks 后格，或者這是否需要留在他們面前的HTML？

如果是這樣，那么這應該可以解決accountLinks：

#accountLinks{
    position: absolute;
    top: 0px;
    right: 0px;
    height:20px;
    width: 170px;
}

看到這個小提琴： http : //jsfiddle.net/NZ2T5/

Answer 3

您看不到您的鏈接，因為它們向左浮動！ 在CSS樣式的Salesboard下方

此外，您的text-intend (9999)不會顯示任何文本。

解決方案較新的瀏覽器提供了固定的屬性，該屬性將完全按照其說明進行操作。

添加此"position: fixed;"

#accountLinks{
    position: fixed;
    top: 0px;
    right: 0px;
    height:20px;
    width: 170px;
}

#Container{
  width:100%;
}

Answer 4

我在id =“ accountLinks”旁邊添加了一個樣式，這樣可以更輕松地將包含登錄名等的div定位。

<h1>Salesboard</h1>
<div id="accountLinks" style="margin-top:-45px;">
<ul>
<li class="login"><a href="#">Log in</a></li>
<li class="register"><a href="#">Register</a></li>
</ul>
</div>

Answer 5

只需將h1放在#header的底部。