Question

我正在敲打我的头脑，因为我正在尝试使我的响应式导航正常工作但我遇到了一个真正令我烦恼的错误，我只是想知道什么是最好和最干净的方法来解决它。您可以在CodePen

上看到这个

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

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

当我使用媒体查询来显示我的移动导航时出现问题（我试图做的是摆脱边距，以便它显示在一个块中）。如果您在浏览器应该更改为移动设备时调整浏览器大小，您可以看到该错误（您会注意到＆＃34;联系人＆＃34;在底部的某处，边缘搞砸了，我正在尝试完全摆脱这一点，所以它直接从桌面移动到移动没有那么小的故障）

  /* Mobile nav
 =====================================================*/

  @media (max-width: 44.99999999em) {
 }

我的完整标记

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

CSS

   @media (min-width: 45.0000em) {

      header a.main_link {
      display: inline-block;
      width: 80px;
      margin-right: 40px;
      margin-left: 40px;
      vertical-align: bottom;
      font-size: 18px;
      line-height: 1.278;
      font-size: 1.125rem;
      text-decoration: none;
      color: #000;
      font-family: 'PT Sans Narrow', sans-serif;
     }

      header.main>div {
      background: #ffffff;
      padding: 30px 0px 40px 0px;
      box-shadow: 0 2px 0 2px rgba(242, 242, 242, 0.75);
    }

      header.main {
      text-align: center;
    }

      header a.sprite-main_logo {
      display: inline-block;
      vertical-align: bottom;
      margin: 0px 89px;
    }


      header a.main_link.last {
      margin-right: 0;
    }

      header a.main_link.first {
      margin-left: 0;
    }


}

  @media (max-width: 44.99999999em) {

   .nav-collapse,
   .nav-collapse * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    .nav-collapse,
    .nav-collapse  {
        list-style: none;
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 10px;
        display: block;


        }

    .nav-collapse a {
        float: left;
        width: 100%;
        border-bottom: 1px solid #f4f4f4;
        margin-bottom: 5px;
        padding-bottom: 10px;
        padding-top: 10px;

            }

    .nav-collapse a:last-child {
        border-bottom: none;
    }

    .nav-collapse a:nth-child(3) {
        display: none;
    }

    .nav-collapse a {
        color: #444;
        text-decoration: none;
        width: 100%;
        background: #ffffff;
        padding-left: 10px;
    }

感谢您的观看！

Answer 1

在header a.main_link您正在使用display:inline-block，因此宽度中包含了空格。您有几个选项可以解决它：

删除HTML中元素之间的所有空格。
在.nav-collapse上将font-size设置为零。
使用display: block并浮动菜单项。
赔偿.nav-collapse a

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

更新

我很高兴你让它与第三选项一起工作。但仅仅是为了记录，这是一个使用内联块的工作演示：DEMO。我挣扎了一下，最后我发现实际上有一个左/右边距添加到<body>。所以我补充道：

body{
  margin:0 !important;
}

就是这样。

Answer 2

您的a元素是内联块，因此空白区域很重要。您可以删除html中的所有空格，也可以执行以下操作：

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

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

2 个答案:

更新