如何在调整文本大小时阻止移动文本？

Question

我创建了一个测试页面但是我遇到了问题。 我设置如果我将鼠标悬停在样本2上，它将改变它的字体大小。

#button:hover {
     background-color: pink;
     font-size: 15px; }

但如果我将鼠标悬停在它上面，则样本3文本会向下移动一点点。我怎么能够 禁用样品3的绝对移动？感谢

Answer 1

  

如果我将鼠标悬停在它上面（按钮），则样本3（假设这是按钮下方的元素）文本会向下移动一点。

考虑以下问题

您在悬停时更改字体大小，包括sample3这一html元素的整个布局向下移动。请参阅

下面的摘录

#button1,#button2{
   width:100px;
}
#button1:hover {
  background-color: pink;
  font-size: 20px;
  position: relative;
}

<div id="button1">
  Option1
</div>
<div id="#button2">
  Option2
</div>

您可以策略性地防止布局移位或出现故障的一种方法是

对悬停在其上的div应用最小高度

稍微调整行高，使元素位于中间

请参阅下面的代码段

#button1,
#button2 {
  min-height: 45px;
  width: 100px;
  line-height:2em;
}

#button1:hover,
#button2:hover {
  background-color: pink;
  font-size: 20px;
  position: relative;
}

<div id="button1">
  Option1
</div>
<div id="button2">
  Option2
</div>