2

それぞれにパディングを入れて 2 つの div を作成しました。

div {
  display:inline;
  background-color:yellow;
  padding: 2px 2px 2px 2px;
}

div:hover {
  font-weight:bold;
}
<body style="font:15px arial,sans-serif;"> 
  <div>one</div>
  <div>two</div>
</body>

上記の CSS に見られるように、マウスが div の上に置かれたときにフォントの太さを太字にしました。

ここで、最初の div にカーソルを合わせると、2 番目の div が少し右に移動します。これは、太字フォントのテキストを収容するために必要な追加の水平スペースのためです。

div がシフトしないようにする方法はありますか? フォントの太さが通常の場合 (つまり、div がホバーされていない場合) であっても、追加のスペースを考慮に入れることはできますか?

前もって感謝します！

4

3 に答える 3

4

div はテキストの周りに収まるように設計されているため、シフトします。テキストが大きくなると、div も大きくなります。あなたの最善の策は、divに固定幅を設定することです。したがって、移動しません。

于 2013-07-07T05:18:59.730 に答える
0

幅を固定するか、ホバー部分でパディングを減らします。

于 2013-07-07T05:49:50.987 に答える
0

display : inline;使用する代わりに、sfloat:left;に特定の量を提供します。widthdiv

div {
  background-color: #FFFF00;			
  float: left;
  padding: 2px;
  width: 41px;
}

div:hover {
  font-weight:bold;
}
<div>one</div>
<div>two</div>

于 2015-06-23T08:01:15.150 に答える