动态调整按钮内边距：解决hover时bi-list图标导致导航栏布局异常

方法一：通过动态调整内边距抵消图标尺寸变化 #

核心思路是先固定按钮的整体尺寸，在图标字号增大时按比例减少按钮内边距，让图标变大后的总尺寸（图标尺寸+内边距）和初始状态完全一致。

示例代码：

/* 基础按钮样式：固定宽高，初始内边距配合图标尺寸 */
.navbar-toggle {
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  padding: 10px; /* 初始内边距，和30px图标搭配总尺寸为50px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: padding 0.3s ease; /* 内边距过渡动画，保证交互流畅 */
}

/* 图标基础样式 */
.bi-list {
  font-size: 30px;
  transition: font-size 0.3s ease;
}

/* 悬停状态：图标字号增大，内边距按比例减少 */
.navbar-toggle:hover .bi-list {
  font-size: 35px;
}

.navbar-toggle:hover {
  /* 计算内边距减少量：(新字号-原字号)/2，确保按钮总尺寸不变 */
  padding: calc(10px - (35px - 30px)/2);
}

这个方法的优势是图标实际字号变大，不会出现缩放带来的模糊问题，适合对图标清晰度要求高的场景。

方法二：使用transform: scale()实现无尺寸变化的放大 #

你之前尝试scale()没解决问题，大概率是没处理图标溢出和变换原点的问题。这种方法更简洁，直接缩放图标，按钮尺寸完全不变：

示例代码：

.navbar-toggle {
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 防止图标缩放后超出按钮边界 */
}

.bi-list {
  font-size: 30px;
  transition: transform 0.3s ease;
  transform-origin: center; /* 确保图标从中心缩放，避免偏移 */
}

.navbar-toggle:hover .bi-list {
  transform: scale(1.1667); /* 35/30≈1.1667，对应字号从30px放大到35px的比例 */
}

这种方法无需计算内边距，代码更简洁，交互流畅度高。如果图标尺寸变化不大，缩放带来的模糊几乎可以忽略。

关键注意点 #

• 无论用哪种方法，都要给按钮设置固定宽高，确保导航栏布局不会因按钮尺寸变化被打乱。
• 加上transition过渡动画，让交互效果更自然，避免生硬的尺寸/缩放变化。

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