我正在尝试将 5 个按钮放入代码中，但是当将鼠标悬停在它们上面时，悬停的按钮会继续将按钮向左推

Question

我正在尝试将下面给出的 5 个按钮放入我的代码中，但在尝试这样做时，悬停的按钮会将按钮推向左侧，向左推。我想这可能是填充的问题，但我尝试了很多方法，但都没有奏效。

.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>

Answer 1

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

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

Answer 2

用这个替换你的css。

.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: 4.8px 14.8px 4.8px 14.8px; /*Change This*/
}

修改css后如果不生效，需要用chrome浏览器打开文件。