2

私は次のhtmlを持っています

          <div id="menu">
            <ul class="horizMenu">
            <li id="active"><a href="#" id="current">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
            </ul>
        </div>

そして私が持っているCSSで

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

リンクの上にマウスを置くと、色が変化して太字になることを除いて、すべてがうまく機能しますが、これは私が望むものですが、他のすべての li 要素もわずかに移動し、マウスをオフにすると元に戻ります. これが起こらないようにする簡単な方法はありますか？

4

4 に答える 4

3

誰が-1したかはわかりませんが、Mauroの答えは本質的に正しいです。自動幅のアイテムを簡単に作成することはできません。内部のフォントが太字でなかった場合の幅に依存します。

ただし、「float：left;」インライン表示要素の幅は設定できないため、ルールも必要になります。また、必要な幅をボタンのフォントサイズに依存させるには、「em」の方がおそらく適切な単位になります。

于 2008-10-21T08:03:20.157 に答える
2

アイテムの太字の幅よりも大きいリスト アイテム要素に幅を追加します。

#menu li
{
   width: 150px;
}

または、ホバー時の太字/太字解除の影響を受けない等幅フォントを試すこともできます。

于 2008-10-20T08:02:01.733 に答える
1

この menutext { line-height: 10px; を使用してみてください。/* または何でも */ }

また、インライン要素の幅を設定するには、display: inline-block; を使用します。

float:left はあまり友好的ではないかもしれません。それを使用して物事が台無しになる場合は、clear:both を使用してください。

于 2010-11-18T19:06:33.967 に答える
1

私はちょうど同じ問題を抱えていました。私が考え、これから使用する可能性のある解決策は、代わりに text-shadow を使用することです。

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

ただし、テキストは少しぼやけて見えます。3 番目のパラメータを 0 に設定すると、テキストはぼやけませんが、少しだけ太くなります。

これは、幅が動的なテキストを扱うよりも優れていると思います。

于 2011-12-29T20:22:42.340 に答える