Question

我已经创建了一个基本布局，页面上有2个链接，一个寄存器和一个登录按钮。

看看我的jsfiddle链接，看看它的外观。有一个黑色的盒子作为标志，你会看到绿色和蓝色的盒子是我的按钮。

我需要在页面顶部显示它们。

不确定我需要对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>推倒了 - 是否可以在帐户链接div之后将其移动到，或者是否需要在HTML中停留在它们之前？< / p>

如果是这样，那么这应该修复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的底部。

DIV没有显示在页面顶部

5 个答案: