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

あなたのスタイルは、すべてのリンクを取得し、上から 0 ピクセル、右から 10 ピクセルの位置に配置すると、1 か所に配置されます。

回避するには、リンクを 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;
}

これらの1つが機能するはずです。

于 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; margin-right:100px; パディング:6px; 右：0; 幅:700px; テキスト揃え:中央; 表示ブロック; }

.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 に答える