1

内部にテキストと境界線がある div があります。

<div><span>This is my div</span></div>​

そのdivにカーソルを合わせると、フォントを太字にしたいです。

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
}

span{ 
    padding:20px;

}

div:hover{
    font-weight:bold;
}

</p>

これにより、div が少し広くなり、ちらつきが発生します。

JSFiddle の例

この問題を解決するにはどうすればよいですか?

編集：

div の幅はコンテンツに合わせて大きくする必要がありますが、重量では大きくなりません。

4

4 に答える 4

12

あなたの div にはinline-block明示的な幅があり、ないため、コンテンツをシュリンクラップします。フォントはプロポーショナル フォントなので、太字にすると太くなります (横方向のスペースを占有します)。

div に固定幅を指定するか、に設定するblockか、モノスペース フォントを使用します。

于 2012-10-23T15:57:12.963 に答える
1

letter-spacing で遊んで、かなり近づきました：

http://jsfiddle.net/thezver/U56R6/1/

<div>Asdf</div>
<div>ab acRsery</div>
<div>abc f</div>
<div>aMdNhjkl</div>
<div>1</div>

CSS:

div{
    display:inline-block;
    font-family:'Open Sans';
    font-size: 16px;
    padding:5px 10px;
    border:1px solid gray;
    letter-spacing: 0.5px;
}

div:hover{
    font-weight:bold;
    letter-spacing:-0.1px;
}
于 2014-04-08T15:47:12.053 に答える
0

固定幅で div を設定し、テキストを中央揃えにしてきれいにすることができます

div{
    border: 1px solid black;
    display:inline-block;
    padding:20px;
    width: 150px;
    text-align: center;
}

span{
    padding:20px;
}

div:hover{ 
    font-weight:bold; 
}

jsFiddle の作業例

お役に立てれば

于 2012-10-23T16:02:50.627 に答える