无法获得右侧边距以在基于网格的固定导航栏上工作

debugcn 发表于 Dev

code_potato

我创建了一个粘性顶部导航栏，它工作正常。我在左侧徽标图像上添加了15vw的边距，而我尝试在右侧进行同样的操作，但它不起作用，我也不知道为什么。我敢肯定这是一个简单的解决方案，但是我是新手！

HTML：

  <!-- Navigation Bar -->
   <nav class="navbar">
     <a class="nav-logo" href="index.html"><img src="https://i.imgur.com/1LnAM3W.png" title="Home" height="50px"></a>
     <b class="filler"></b>
     <a id="about-us" class="nav-link" href="about_us.html">About Us</a>
     <a id="our-mentors" class="nav-link active" href="our_mentors.html">Our Mentors<a/>
     <a id="bookings" class="nav-link" href="bookings.html">Bookings</a>
     <a id="contact" class="nav-link" href="contact_us.html">Contact</a>
   </nav>

CSS：

/* The navigation bar */
.navbar {
  display: grid;
  grid-template-rows: 55px;
  grid-template-columns: max-content 1fr max-content max-content max-content max-content;
  grid-template-areas: "nav-logo filler about-us our-mentors bookings contact-us";
  overflow: hidden;
  background-color: white;
  position: fixed;
  top: 0;
  width: 100%;
}

.nav-logo {
  grid-area: "nav-logo";
  position: fixed;
  margin-left: 15vw;
}

.filler        { grid-area: filler;
                 background: white }
#about-us      { grid-area: about-us }
#our-mentors   { grid-area: our-mentors }
#bookings      { grid-area: bookings }
#contact-us    { grid-area: contact-us;
                 margin-right: 15vw }

“与我们联系”是最右边的网格项，但是空白不会像徽标那样适用于它。另外，我也不使用引导程序。有什么想法吗？

斯奈克尔

您的联系人链接的ID不是您的CSS中使用的正确链接，请尝试在HTML中将id =“ contact-us”放入CSS或将#contact放入CSS中，它应该可以工作！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。