如何修复导航元素弹跳效果？保持参数不变且不更改字体

问题根源是聚焦时font-size和font-weight的变化导致链接元素尺寸改变，触发布局重排产生弹跳。以下是两种修复方案，均保留所有原有字体参数：

方案1：基于现有Flex布局修复 #

通过固定导航项的占位尺寸，让文字样式变化不影响布局：

.nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  align-items: stretch; /* 让所有li高度一致 */
}

.nav-list__item {
  flex: 0 0 auto; /* 固定li宽度，不随内容收缩/拉伸 */
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: flex;
  align-items: center;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
  height: 100%; /* 固定高度，避免文字大小变化导致高度波动 */
  min-width: max-content; /* 固定宽度为默认文字宽度，聚焦时不缩窄 */
}

.nav-list__link:focus {
  color: #8428f8;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.3s;
}

方案2：改用Grid布局（推荐） #

Grid布局天生能稳定单元格尺寸，从根源消除弹跳：

.nav-list {
  padding: 0;
  margin: 0;
  display: grid;
  grid-auto-flow: column; /* 横向排列导航项，和Flex效果一致 */
  list-style: none;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: flex;
  align-items: center;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
  width: 100%;
  height: 100%; /* 填充整个Grid单元格，文字变化不影响单元格尺寸 */
}

.nav-list__link:focus {
  color: #8428f8;
  font-weight: 800;
  font-size: 16px;
  transition: all 0.3s;
}

两种方案都完全保留了你原有的字体设置，只是通过调整布局属性稳定元素占位，解决弹跳问题。Grid布局的方案更简洁，且不容易出现边缘情况。

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