Question

I am trying to achieve this

我希望我的导航栏工作，以便在悬停时它可以填充到原始导航div背景的背景的每一侧。因为否则，它将继续在UL内部制作小方块。我不知道为什么在a链接中指定的类中设置填充不能解决此问题。我在每个元素周围都留有边框，以使其更易于理解我的意思。当我在家里徘徊时，它只停留在字母周围的一个小盒子里，并且颜色没有延伸到最后。

.nav_links{
    font-weight: bold;
    font-size: 1.5rem;
    padding: .5rem;
    list-style-type: none;
    border: 5px solid black;
}

.nav_link{
    padding: 1rem;
    text-decoration: none;
    color: #F4D06F;
    text-transform: capitalize;
    display: block;
    padding: 0.5rem 1rem;
    transition: all 0.5s ease-in-out;
    padding: 0.5rem 1rem;
    border: 5px solid black;
}
.nav_link:hover{
    border: black;
    background: var(--Cwhite);
    padding: .5rem;
}

li:not(:last-child) {
    margin-bottom: 5px;
}

<header class="header" id="header">
  <div class="banner">
    <h1 class="banner-title">Pen Pen Pizza</h1>
    <div class="banner-icons">
      <a href="#" class="banner_social-icon">
      <i class="fab fa-facebook fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-twitter fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-google-plus fa-fw"></i>
      </a>
      <a href="#" class="banner_social-icon">
        <i class="fab fa-instagram fa-fw"></i>
      </a>
    </div>
  </div>
  <div class="navBtn">
    <i class="fas fa-bars"></i>
  </div>
  <nav class="nav">
    <ul class="nav_links">
      <li><a href="#Header" class="nav_link">Home</a></li>
      <li><a href="#About" class="nav_link">About</a></li>
      <li><a href="#Contest" class="nav_link">Contest</a></li>
      <li><a href="#Work" class="nav_link">Work</a></li>
      <li><a href="#Contact" class="nav_link">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

问题是ul元素的浏览器默认padding-left约为40像素。

因此，如果您需要li元素向左刷新，则必须自定义nav-links元素的样式，这是一个ul元素。

.nav_links{
    font-weight: bold;
    font-size: 1.5rem;
    padding-left: 0 !important;
    list-style-type: none;
    border: 5px solid black;
}

Answer 2

也许我误会了_ 但不应该

    .nav_link:hover {
       border: black;
       background: var(--Cwhite);
       padding: .5rem;
    }

是

    .nav_link:hover {
       border: black;
       background: var(--white);
       padding: .5rem;
    }

使悬停背景完全填充到Nav背景的结尾

2 个答案: