Html 如何修复此响应性导航错误？

当我试图让我的响应导航正常工作时，我撞到了头，但我遇到了一个让我非常恼火的错误，我只想知道解决这个问题的最好和最干净的方法是什么。你可以在电视上看到这个

我设置的是一个居中导航，中间有一个徽标，我有一个边距来包围徽标，所有这些都在一个媒体查询

中。

/* Desktop specific nav
 =====================================================*/
  @media (min-width: 45em) {
 }

当我使用媒体查询来显示我的移动导航时，问题就出现了（我试图做的是去掉边距，这样它就会显示在一个块中）。如果你在浏览器切换到手机时调整浏览器的大小，你就会看到这个错误（你会注意到底部某个地方的“联系人”和混乱的边距，我正试图完全消除这个问题，这样它就可以直接从桌面切换到手机，而不会出现小故障）

我的完整标记

<header class="main"> 
      <nav class="nav-collapse" >


       <a href="#about" class="main_link first">ABOUT</a>
       <a href="#skills" class="main_link">PORTFOLIO</a>
       <a href="#" class="sprite-main_logo sprite">LOGO</a>
       <a href="#section_about " class="main_link">BLOG</a>
       <a href="#contact" class="main_link last">CONTACT</a>


      </nav> 

</header>

---

谢谢收看

在

标题a.main\u链接中

您使用的是

显示：内联块

，因此您的宽度中包含空白。您有几个选项可以修复它：

删除HTML中元素之间的所有空白

在

.nav collapse

上将字体大小设置为零

使用

display:block

并浮动菜单项

补偿

上带有负边距的空间。导航折叠a

我个人更喜欢选项3，但这真的取决于你

更新 我很高兴你能用第三种方法。但为了记录在案，这里有一个使用内联块的工作演示：。我为此挣扎了一会儿，最后我发现实际上有一个左/右边距被添加到

。所以我补充说：

body{
  margin:0 !important;
}

---

就是这样。

您的

a

元素是内联块，因此空格计数。您可以删除html中的所有空白，也可以执行以下操作：

.nav-collapse {
    letter-spacing: -0.31em;
}
.nav-collapse a {
    letter-spacing: normal;
}

---

如果我使用选项1，我将如何使用navYou进入HTML并删除所有标记之间区域中的所有空白。这很简单。你的代码的格式不会这么好。这是一个关于您遇到的问题的好链接。好的，我已经这样做了，但是当我调整大小时，仍然有一个点，桌面导航显示“联系人”链接不在合适的位置。您有另一个演示吗？好的，这似乎可以工作，非常感谢，而且我的空白也使用选项3修复。

body{
  margin:0 !important;
}

.nav-collapse {
    letter-spacing: -0.31em;
}
.nav-collapse a {
    letter-spacing: normal;
}