リンクの1つを選択すると、リンクが太字になる水平ナビゲーションバーがあります。ただし、1つをクリックすると、フォントが大きくなり、リストアイテムの幅が大きくなるため、右側のアイテムが位置を移動します。これを回避する方法はありますか？テキストを同じ場所に置いておきたいのですが。ありがとうございました。
2 に答える
2
考えられる解決策は次の 2 つです。
要素に幅を設定し、aインライン ブロックにします。
a {
width: 100px;
display: inline-block;
}
太字のテキストが 2 行に分割されずに表示されるように、幅が十分に広いことを確認する必要があります。
2 番目のオプション: テキストの影を使用して太字にします。
a.bolded {
text-shadow:0px 0px 1px black;
}
両方を示すデモを次に示します。ホバーした2番目のものがありますが、jQueryを使用してクラスを追加または削除できます.toggleClass()
于 2012-07-27T16:11:39.300 に答える
0
ケース リンクの CSS を作成する際に、対象とする必要がある 2 つの重要なイベントがあります。1 つは:hover、もう 1 つは です:active。
これらは「疑似クラス」と呼ばれ、要素にマウスを重ねたとき (:hover) および要素をクリックしたとき (:active) に、要素のスタイルを設定するオプションを提供します。
a タグのスタイルをアクティブおよびホバーと同じに設定すると(通常はホバーのみが必要です)、同じ結果が得られ、フォント サイズは同じままになります。ここに例があります：
a, a:hover, a:active { font: normal 13px Arial; text-decoration: none; }
単一の CSS 行で、すべてのスタイルを同じに設定できます。
重要な注意: jquery を使用できますが、その必要はありません (jsfiddle で使用しているのを見ただけです)。
于 2012-07-27T16:55:03.643 に答える