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;
}

这已经移动了我想要它们的链接，但是当我想要将它们彼此相邻显示时，它们都堆叠在每个链接的顶部。显示的唯一链接是“Home”，其余部分位于下方。有任何想法吗？

Answer 1

你的风格说取每个环节并将它从顶部和10px drom定位为0px，它们将位于一个位置。

禁止它通过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;
}

Answer 2

添加

div#header_section {
  display:inline;
}

或

div#header_section a {
  display:inline;
}

其中一个应该有用。

Answer 3

只需改变

position: fixed

要

position:related

Answer 4

嘿，现在您可以更改html和css部分中的一些代码

就像这样

<强>的CSS

.toplink
{ 位置是：固定; 顶：0像素; 保证金右：100px的; 填充：6像素; 右：0; 宽度：700像素; 文本对齐：中心; 显示：块; }

.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/

Answer 5

不要使用：

position: absolute;

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

使用：

float:right;

Demo

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

5 个答案: