0

私はナビゲーションメニューに取り組んでおり、以下のように4つのアンカータグを含むものを作成しました。

 <nav>
<ul>
        <li><a href="/" class="active">BLOG</a></li>
        <li><a href="/about/">ABOUT ME</a></li>
        <li><a href="/portfolio/">PORTFOLIO</a></li>
        <li><a href="/contact/" class="highlight">CONTACT</a></li>
    </ul>
 </nav>

リンクごとに10pxの上部境界線を設定しました。これは、テキストの上にしっかりと配置したいと思います。すべての適切な場所でパディングを0に設定しているにもかかわらず、パディングを取り除くことができません。行の高さを変更しようとしましたが、これはナビゲーションセクション全体を画面の上下に移動するだけで、アンカーテキストと上部の境界線の間のギャップには影響しません。

これがCSSです（必要に応じて投稿できるCSSリセットなどは含まれていませんが、これらは主にHTML5BoilerPlateからのものです。

nav ul {
        padding-right: 24px;
        float: right;
    }

    nav li {
        display: inline;
        font-family: Oswald;
        font-size: 25px;
    }

    nav a {
        color: #7a7a7a;
        text-decoration: none;
        margin-left: 16px;  
    }

    nav li a {
        border-top: 10px solid #7a7a7a; 
    }

    nav a:hover {
        color: #555555
    }

    nav a.active {
        color: #555555;
    }

    nav a.highlight:hover { 
        color: #1f9c66;
    }

    a.highlight {
        color: #29cf86;
    }

誰か助けてもらえますか？ありがとう。

4

3 に答える 3

2

すべてのウェブブラウザのマージンとパディングを削除するアンカーフロートを設定します。

#container li a {
    float:left;
}
于 2012-10-17T02:38:02.160 に答える
1

相対位置を使用して、アンカーを数ピクセル上に移動できます。

li {
    display: inline;
    margin-left: 16px;  
    border-top: 10px solid #7a7a7a;
}

a {
    position: relative;
    top: -6px;
}

ライブデモ： http： //jsfiddle.net/XQK9h/

于 2012-04-17T22:57:23.397 に答える
0

私はそれがあなたを助けると思います。

<style type="text/css">

nav ul {
    padding-right: 24px;
    float: right;
}

nav div {
    border-top: 10px solid green;
    display: block;
    float: left;
    font-family: Oswald;
    font-size: 25px;
    height: 10px;
    margin: 10px;
}

nav a {
    color: #7a7a7a;
    text-decoration: none;
}

nav a:hover {
    color: #555555
}

nav a.active {
    color: #555555;
}

nav a.highlight:hover { 
    color: #1f9c66;
}

a {
    position: relative;
    top: -3px;
}
a.highlight {
    color: #29cf86;
}

</style>

<nav>
<ul>
    <div><a href="/" class="active">BLOG</a></div>
    <div><a href="/about/">ABOUT ME</a></div>
    <div><a href="/portfodivo/">PORTFOLIO</a></div>
    <div><a href="/contact/" class="highdivght">CONTACT</a></div>
</ul>
</nav>
于 2012-04-17T23:16:39.370 に答える