テキストのサイズを変更して、コンテナ内の他の要素を押し付けないようにしますか？

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

質問

次の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;
}

すべてがうまく機能しますが、リンクの上にマウスを置くと色が変わり、太字になります。マウスオフ。これを防ぐ簡単な方法はありますか？

役に立ちましたか？

解決

誰が-1したかはわかりませんが、Mauroの答えは本質的に正しいです：自動幅のアイテムは、中のフォントが太字でなければ幅に応じて簡単に作ることはできません。

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

他のヒント

アイテムの太字の幅よりも大きい幅をリストアイテム要素に追加します。これにより、アイテムが行外にプッシュされなくなります。

#menu li
{
   width: 150px;
}

別の方法として、等幅フォントを試すこともできますが、ホバーの太字/太字の影響は受けません。

これを使用してみてください menutext { 行の高さ：10px; / *または何でも* / }

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

float：leftはあまり使いにくいかもしれません。もしそれを使用し、それが混乱するならclear：both

同じ問題が発生しました。私が考えた、そして今後使用するかもしれない解決策は、代わりにtext-shadowを使用することです。

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top