我试图把5个按钮在一个代码中，但当悬停在它们上面时，悬停的按钮不断地将按钮推到它的左边，再往左

Question

我正试图把下面给出的5个按钮放在我的代码中，但是在尝试这样做的时候，悬停的按钮正在将按钮推到它的左边，更左边。我想这可能是填充的问题，但我尝试了很多方法，但没有一个奏效。

null

.buttons {
  border-radius: 4px;
  background-color: white;
  color: #003466;
  border: 0.8px solid #707070;
  padding: 6px 16px 6px 16px;
  margin-right: 1rem;
}

.buttons:hover {
  border: 2px solid #707070;
  padding: 5px 14px 5px 14px;
}

<div style="padding-left: 5rem; padding-top: 5rem;">
  <div>
    <p>Button Not Working Properly</p>
  </div>
  <button class="buttons" type="button">Edit</button>
  <button class="buttons" type="button">New</button>
  <button class="buttons" type="button">Preview</button>
  <button class="buttons" type="button">Export</button>
  <button class="buttons" type="button">Delete</button>
</div>

null

Answer 1

您可以通过减少填充与增加悬停时的边框相同的数量来解决这个问题。像这样：

.button:hover {
  border: 2px solid #707070;
  padding: 4.8px 14.8px 4.8px 14.8px; /*Change This*/
}