CSS 样式正在我的 a 标签旁边创建一个悬停框,而不是在它上面

CSS style is creating a hover box next to my a tag, rather than over it

我完全被难住了 - 我正在学习在线课程,无法选择与我的老师不同的地方。 当您将鼠标悬停在 link 上时,我试图在每个 link 上显示一个绿色框。目前我得到了盒子,但只在 link

的左边

试图分享完整的 HTML 和 CSS,但太大了,问题不会 post。如果您需要更多信息,请告诉我谢谢

#navbar {
  display: flex;
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  justify-content: space-between;
  z-index: 1;
  padding: 1rem;
}  

#navbar ul {
  display: flex;
  align-items: center;
  list-style: none;
}

#navbar ul li a {
  color: #fff;
  padding: 0.75rem;
  margin: 0 0.25rem;
}

#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}
  <nav id="navbar">
    <h1 class="logo">
    <span class="text-primary">
      <i class="fas fa-book-open"></i> Edge 
    </span>Ledger
    </h1>
    <ul>
      <li><a href="#home"></a>Home</li>
      <li><a href="#what"></a>What</li>
      <li><a href="#who"></a>Who</li>
      <li><a href="#contact"></a>Contact</li>
    </ul>
  </nav>

离你不远了!我认为您的问题是您没有将 link 文本放在 link 中。例如 Home 应该在 a 元素内,而不是在它的右边。所以 <li><a href="#home"></a>Home</li> 应该变成 <li><a href="#home">Home</a></li>.

这将导致下划线出现在 link 上,您可以通过将 text-decoration: none 添加到 #navbar ul li a 选择器来禁用下划线。

完整代码如下所示:

#navbar {
  display: flex;
  position: sticky;
  top: 0;
  background: #333;
  color: #fff;
  justify-content: space-between;
  z-index: 1;
  padding: 1rem;
}  

#navbar ul {
  display: flex;
  align-items: center;
  list-style: none;
}

#navbar ul li a {
  color: #fff;
  padding: 0.75rem;
  margin: 0 0.25rem;
  text-decoration: none;
}

#navbar ul li a:hover {
  background: #93cb52;
  border-radius: 5px;
}
 <nav id="navbar">
    <h1 class="logo">
    <span class="text-primary">
      <i class="fas fa-book-open"></i> Edge 
    </span>Ledger
    </h1>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#what">What</a></li>
      <li><a href="#who">Who</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

祝你好运!

这只是您的代码中的错字

在您的 html 中,您应该将 link 文本放在 a 标签内而不是 li 标签内

那就这样吧

<li><a href="#home">Home</a></li>
<! - - instead of doing that
  <li><a href="#home"></a>Home</li>
-->