0

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

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

4

5 回答 5

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;
}
于 2012-06-22T11:59:22.967 回答
0

添加

div#header_section {
  display:inline;
}

或者

div#header_section a {
  display:inline;
}

其中之一应该工作。

于 2012-06-22T11:54:12.013 回答
0

只是改变

position: fixed

至

position:related
于 2012-06-22T11:54:26.027 回答
0

不要使用：

position: absolute;

对于各个链接。这会将它们定位在相对于它们的父级完全相同的位置。

利用：

float:right;

演示。

于 2012-06-22T12:16:50.840 回答
0

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

像这样

CSS

.toplink
{ 位置：固定；顶部：0px；边距右：100px；填充：6px；对：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/

于 2012-06-22T11:59:06.493 回答