为什么我的链接在彼此之上？

我正在开发一个Web项目的标题部分，我想链接停留在它的顶部。为什么我的链接在彼此之上？

这里的HTML：

<div id="header_section"> 

    <a class="toplink" href="#">Contact</a> 
    <a class="toplink" href="#">Register</a> 
    <a class="toplink" href="#">Staff Login</a> 
    <a class="toplink" href="#">Home</a> 

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div>

而CSS：

a.toplink 
{ 
    font-family:  ‘Arial Narrow’, sans-serif; 
    font-size:   12px; 
    font-weight:  bold; 

    position:   fixed; 
    top:    0px; 
    right:    10px; 
    margin-right:  100px; 

    padding:   6px; 
    width:    100px; 
    text-align:   center; 

    color:    black; 
    background-color: #f3f3f3; 
}

这感动，我想他们的联系，但他们都堆积在每个顶部时，我想显示他们彼此相邻。显示的唯一链接是“家”，其余的在下面。有任何想法吗？

来源

2012-06-22 WebDevDanno

将您的代码添加到jsfiddle.net –

是的。你能给我们一个jsfiddle.net现场演示吗？ –

你究竟需要.......... –

添加

div#header_section { 
    display:inline; 
}

或

div#header_section a { 
    display:inline; 
}

这些应该工作之一。

来源

2012-06-22 11:54:12 poepje

只是改变

position: fixed

要

position:related

来源

2012-06-22 11:54:26 Ajai

你的意思是*位置：亲戚*，对吧？ – McGarnagle

嘿，现在你可以在你的HTML和CSS部分修改一些代码

像这样

的CSS

.toplink
{ position：fixed; top：0px; margin-right：100px; padding：6px; right：0; 宽度：700px; text-align：center; display：block; }

.toplink li{ 
float:left; 
} 
.toplink a { 
font-family:  ‘Arial Narrow’, sans-serif; 
    font-size:   12px; 
    font-weight:  bold; 
    color:    black; 
    margin-left:10px; 
    background-color: #f3f3f3; 
    display:block; 

}

HTML

<div id="header_section"> 

<ul class="toplink"> 
    <li> <a href="#">Contact</a></li> 
    <li> <a href="#">Register</a></li> 
    <li> <a href="#">Staff Login</a> </li> 
    <li><a href="#">Home</a> </li> 
</ul> 

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div>

现场演示http://jsfiddle.net/n9UKF/2/

来源

2012-06-22 11:59:06

你的风格说，采取自上而下和10px的DROM右边的每一个环节，它的位置0像素，他们将在一个地方位置。

可以用div来包装链接，并且可以将其设置为不链接。

<div id="header_section"> 
    <div class="links"> 
     <a class="toplink" href="#">Contact</a> 
     <a class="toplink" href="#">Register</a> 
     <a class="toplink" href="#">Staff Login</a> 
     <a class="toplink" href="#">Home</a> 
    </div>  

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div> 

.links { 
    position: fixed; 
    top: 0px; 
    right: 10px; 
} 

a.toplink 
{ 
    font-family:‘Arial Narrow’, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    margin-right:100px; 

    padding:6px; 
    width:100px; 
    text-align:center; 

    color:black; 
    background-color:#f3f3f3; 
}

来源

2012-06-22 11:59:22 yarm

感谢哥们，当我从午餐回来做这件事情时有一个顿悟，这是正确的！ – WebDevDanno

不要使用：

position: absolute;

的各个链接。这将把他们放在与他们父母相同的地方。

用途：

float:right;

Demo。

来源

2012-06-22 12:16:50 Mac

为什么我的链接在彼此之上？

回答

相关问题