html - 如何在悬停时停止盒子的移动？

Question

我有一个框，里面有READ MORE 文本。这是 fiddle为了它。悬停时，盒子向右移动。我想知道这背后的原因是什么？ 我怎样才能停止它的运动？

下面是我的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; 
}

Answer 1

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

为避免这种情况，您可以在框上使用固定宽度:删除 padding-right 和 padding-left 并赋予它 text-align: center 和适当的 width 设置。

这是相应的 fiddle :https://jsfiddle.net/ghwzzyjy/1/