html - 为什么我的链接彼此重叠？

Question

我正在开发 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;
}

这已将链接移动到我想要的位置，但是当我想将它们并排显示时，它们都堆叠在每个链接之上。显示的唯一链接是“主页”，其余链接位于下方。有任何想法吗？

Answer 1

您的样式表示获取每个链接并将其定位在距顶部 0px 和右侧 10px drom 的位置，它们将位于一个位置。

为了避免它用 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;
}