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没有悬停），我还可以考虑额外的空间吗？

提前谢谢！

Answer 1

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

Answer 2

将宽度拟合为固定宽度或在悬停部分中减小填充。

Answer 3

而不是display : inline;使用float:left;并向width提供特定数量的div

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

<div>one</div>
<div>two</div>