選択したリンクの下に境界線が表示されるようにナビゲーション バーのスタイルを設定しようとしています。ナビゲーション バーの各リンクの幅は同じ 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%;}
ました。ただし、これらのどれも機能しませんでした。