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

Question

​

.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>

​

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

Answer 1

只需在锚标记上将display: block转换为display: inline-block即可。使用display: block时，它们是全宽的，当它们被平移20px时，会导致溢出和水平滚动条。

​

.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>

​

Answer 2

使用text-indent而不是transform：

​

.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>

​