CSS设置按钮hover效果时如何避免相邻按钮位移

你遇到的相邻按钮位移是典型的hover状态改变了元素盒模型尺寸，触发文档流重排导致的，和你描述的「悬停左侧按钮时右侧按钮左移」现象完全匹配的触发逻辑是：

1. 两个搜索按钮放在设置了text-align: center的居中容器内（和原版谷歌搜索页的按钮布局一致）
2. 给按钮写hover样式时，给默认状态无边框的按钮新增了1px宽度的边框，又没有设置box-sizing: border-box，导致hover时按钮自身的总宽度增加了2px（左右边框各1px）
3. 两个按钮的总占据宽度变大后，居中布局会自动调整整个按钮组的位置，让按钮组保持相对容器居中，视觉上就表现为右侧的「I'm Feeling Lucky」按钮向左偏移

其他可能触发同类问题的写法还包括：hover时修改按钮的margin/padding值、按钮未设置统一垂直对齐规则引发行内块基线位移。

按顺序做以下调整即可彻底解决问题：

• 第一步：全局统一盒模型规则，从根源避免边框、内边距导致的元素尺寸计算偏差

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 第二步：给按钮默认状态预留和hover状态等宽的边框占位，不要在hover时新增会改变宽度的属性
  会触发偏移的错误写法参考：

  .search-btn {
    padding: 10px 18px;
    background: #f8f9fa;
    border: none; /* 默认无边框 */
    border-radius: 4px;
    margin: 0 6px;
    cursor: pointer;
  }
  .search-btn:hover {
    border: 1px solid #dadce0; /* hover时才加边框，直接改变元素宽度 */
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  }
  

  可解决偏移的正确写法：

  .search-btn {
    padding: 10px 18px;
    background: #f8f9fa;
    border: 1px solid transparent; /* 默认就留1px边框位置，设为透明不显示 */
    border-radius: 4px;
    margin: 0 6px; /* 外边距固定，不要在hover状态修改margin值 */
    cursor: pointer;
    vertical-align: middle; /* 统一行内块垂直对齐方式，避免基线偏移 */
  }
  .search-btn:hover {
    border-color: #dadce0; /* hover时仅修改边框颜色，不改变边框宽度 */
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); /* box-shadow不占据文档流位置，不会触发重排 */
  }
  

# 校验方法
修改完成后打开浏览器开发者工具，选中搜索按钮强制触发`:hover`状态，查看元素盒模型面板：只要hover状态下按钮的宽度、边框宽度、外边距、内边距和默认状态完全一致，就不会再出现相邻按钮位移的问题。

内容的提问来源于stack exchange，提问作者SonuKhan