当我使用 CSS 中的悬停元素翻译 {transform: translateX(20px)} 导航栏链接到左侧时,整个网页左右摇晃

When i use the hover element in CSS to translate {transform: translateX(20px)} the nav bar links to left, the entire web page shakes left and right

.nav-links a {
  display: block;
  color: var(--secondColor);
  padding: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  text-shadow: yellow;
  transition: var(--mainTransition);
}

.nav-links a:hover {
  background: var(--mainGrey);
  transform: translateX(20px);
  color: var(--mainColor);
}
<nav class="nav-bar">
  <div class="nav-links">
    <ul>
      <li><a href="#" class="nav-link">home</a></li>
      <li><a href="#" class="nav-link">skill</a></li>
      <li><a href="#" class="nav-link">about</a></li>
      <li><a href="#" class="nav-link">project</a></li>
      <li><a href="#" class="nav-link">team</a></li>
    </ul>
  </div>
</nav>

当我在悬停元素中使用 transform: translateX(20px) 属性 时,整个网页左右摇晃 如果我在悬停元素中使用填充 属性 将链接向左移动,则不会出现此问题,但我想使用翻译 属性 以获得更大的灵活性

只需将锚标签上的 display: block 改为 display: inline-block。它们是全宽 display: block,当它们被平移 20 像素时会导致溢出和水平滚动条。

.nav-links a {
  display: inline-block;
  color: var(--secondColor);
  padding: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  text-shadow: yellow;
  transition: var(--mainTransition);
}

.nav-links a:hover {
  background: var(--mainGrey);
  transform: translateX(20px);
  color: var(--mainColor);
}
<nav class="nav-bar">
  <div class="nav-links">
    <ul>
      <li><a href="#" class="nav-link">home</a></li>
      <li><a href="#" class="nav-link">skill</a></li>
      <li><a href="#" class="nav-link">about</a></li>
      <li><a href="#" class="nav-link">project</a></li>
      <li><a href="#" class="nav-link">team</a></li>
    </ul>
  </div>
</nav>

使用text-indent代替转换:

.nav-links a {
  display: block;
  color: var(--secondColor);
  padding: 1rem;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  text-shadow: yellow;
  transition: var(--mainTransition);
}

.nav-links a:hover {
  background: var(--mainGrey);
  text-indent: 20px;
  color: var(--mainColor);
}
<nav class="nav-bar">
  <div class="nav-links">
    <ul>
      <li><a href="#" class="nav-link">home</a></li>
      <li><a href="#" class="nav-link">skill</a></li>
      <li><a href="#" class="nav-link">about</a></li>
      <li><a href="#" class="nav-link">project</a></li>
      <li><a href="#" class="nav-link">team</a></li>
    </ul>
  </div>
</nav>