Html 如何在悬停时停止长方体的移动？

我有一个盒子，里面有一个

阅读更多

文本。这是它的基本原理。悬停时，长方体向右移动。我想知道这背后的原因是什么<代码>如何停止其移动？

下面是我的css代码：

.chrisdavenport-middle24-text{
   position: absolute;
    top: 290px;
    /* font-style: italic; */
    font-family: "Adelle PE";
    padding-right: 200px;
    /* font-size: 16px; */
    padding-left: 200px;
    border-style: solid;
    padding-top: 10px;
    padding-bottom: 10px;
   color: orange;
    line-height: 1.379;
    font-size: 16px;
    font-family: "Adelle PE";
   color: red;
    right: 35px;
    letter-spacing: 0.300em;
}

.chrisdavenport-middle24-text:hover {
    font-weight: bold;
    font-style: italic; 
}

---

盒子实际上没有移动，只是变宽了，因为你正在改变字体的重量和样式。要解决这个错误，您只需要为段落标记指定一个“宽度”属性，或者通过给它一个“左”属性来暗示宽度，以补充上面已经使用的“右”对应项。这样做将限制其宽度并阻止长方体更改大小

.chrisdavenport-middle24-text{
  position: absolute;
  top: 290px;
  left: 0;
  right: 0;

  padding: 10px 200px;

  font-family: "Adelle PE";
  line-height: 1.379;
  font-size: 16px;
  letter-spacing: 0.300em;
  text-align: center;

  border-style: solid;
  color: red;
}

.chrisdavenport-middle24-text:hover {
  font-weight: bold;
  font-style: italic;
}

---

框没有移动，只是变宽了一点（右对齐，所以左边框向左移动了一点）。这是因为粗体和斜体字体比普通字体占用了更多的水平空间

为了避免这种情况，您可以在框上使用固定的宽度：擦除

右侧填充

和

左侧填充

，并为其设置

文本对齐：居中

和适当的

宽度

设置

---

下面是相应的提琴：

这个css是用于文本的，你能显示它的css代码吗box@AkhilTrivedi这是我仅有的CSS，您可以查看我的JSFIDLE示例。