导航列表a标签hover字体放大致其他列表项偏移的解决需求

你遇到的问题根源是：hover时修改font-size会改变元素的实际占位尺寸，触发页面布局重排，导致其他列表项被挤移位。下面是几种实用的解决方法：

方法1：固定列表项的高度 #

给导航列表的<li>元素设置固定高度（或最小高度），匹配hover后字体对应的行高，这样即使<a>标签字体变大，列表项的占位空间也不会改变：

:root {
  --fs-600: 1rem;
  --fs-700: 1.25rem;
  --clr-accent-400: red;
}
.nav-list {
  /* 横向导航可添加flex布局，根据需求调整 */
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
}
.nav-list li {
  /* 计算hover后的行高，设置为固定高度，1.4为默认行高，可按需调整 */
  height: calc(var(--fs-700) * 1.4);
  display: flex;
  align-items: center;
}
.nav-list a {
  text-decoration: none;
  color: rgb(169, 125, 169);
  font-size: var(--fs-600);
  transition: background-color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-accent-400);
  font-size: var(--fs-700);
}

方法2：用transform缩放代替修改font-size #

transform: scale()只会改变元素的视觉大小，不会改变它在布局中占据的空间，完全不会触发位移，而且性能最优：

:root {
  --fs-600: 1rem;
  --scale-factor: 1.25; /* 对应原1.25rem/1rem的比例 */
  --clr-accent-400: red;
}
.nav-list a {
  text-decoration: none;
  color: rgb(169, 125, 169);
  font-size: var(--fs-600);
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
  /* 可选：缩放时避免文字模糊，设置变换原点 */
  transform-origin: center;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-accent-400);
  transform: scale(var(--scale-factor));
}

方法3：给链接提前预留空间 #

将<a>标签设置为inline-block，通过padding或固定尺寸预留字体变大的空间，避免hover时尺寸突变：

:root {
  --fs-600: 1rem;
  --fs-700: 1.25rem;
  --clr-accent-400: red;
}
.nav-list a {
  text-decoration: none;
  color: rgb(169, 125, 169);
  font-size: var(--fs-600);
  transition: background-color 0.3s ease-in-out, font-size 0.3s ease-in-out;
  display: inline-block;
  /* 上下padding预留字体变大的空间 */
  padding: 0.2rem 0;
  /* 也可以直接设置固定高度和行高 */
  /* height: calc(var(--fs-700) * 1.4); */
  /* line-height: calc(var(--fs-700) * 1.4); */
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-accent-400);
  font-size: var(--fs-700);
}

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