html - 字体粗细变化时保留原来的内边距

Question

我创建了两个 div，每个 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 上，第二个 div 会向右移动一点，因为需要额外的水平空间来容纳带有粗体字体的文本。

有什么办法可以防止 div 移动？即使字体粗细正常（即 div 未悬停时），我是否可以考虑额外的空间？

先感谢您！

score 4 · Accepted Answer

div 会发生变化，因为它们是为了适应文本，所以如果文本变大，div 也会变大。你最好的选择是在 div 上设置一个固定的宽度，因此它不会移动。

score 0 · Accepted Answer

0

要么将宽度设置为固定宽度，要么在悬停部分减少填充。

于 2013-07-07T05:49:50.987 回答

score 0 · Accepted Answer

而不是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>

3 回答 3