1

選択したリンクの下に境界線が表示されるようにナビゲーション バーのスタイルを設定しようとしています。ナビゲーション バーの各リンクの幅は同じ 120 ピクセルですが、各リンクのテキストの長さは異なります (ホーム、クライアント エリア、FAQ など)。など。私がやろうとしているのは、下の境界線がテキストの長さだけでa、幅がすべて 120px の要素全体の長さではないようにすることです。うまく説明できたと思います。

以下は私が使用しているコードです。

HTML コード

<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="About.html">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Client Area</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

CSS コード

ul{
    list-style:none;
}

nav li {
    float:left;
}

nav {
    float:right;
    margin-top: -3%;
}

nav a {
    display:block;
    width: 120px;
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

a.activeクラスでは、 と のwidth:100%; border-width: 100%;ようなことを試しa.active border {width;100%;}ました。ただし、これらのどれも機能しませんでした。

4

2 に答える 2

3

次のように、幅を削除し、代わりにマージンを指定して、「nav a」の css を変更してみてください。

nav a {
display: block;
margin: 0 20px;
text-align: center;
text-decoration: none;
color: #134BA0;
font-size: 22px;
}
于 2013-09-12T11:39:11.513 に答える
0

この CSS を使用します。

ul{
    list-style:none;
}

nav li {
    float:left;
    width: 120px;
}

nav {
    float:right;
    margin-top: -3%;
}

nav li a {
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

nav li a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

基本的に私はliに幅を置き、aの表示ブロックを削除します

于 2013-09-12T11:42:32.303 に答える