Css 导航栏行未垂直对齐

我正在尝试制作一个导航栏，在较小的屏幕上隐藏文本。我无法使杆正确对齐

如你所见，左边比右边低

此外，左侧“ul”的第一个列表元素不填充“ul”容器的大小，但所有其他列表元素都填充。为什么会这样

多谢各位

<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
    <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left pull-left list-inline contact-links">
          <li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>

          <li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
          <li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan@garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
          </ul>

      <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
        <li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
        <li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
      </ul>

    </div>
</div>

1-800-GARMANTS

在小屏幕上，锚定被设置为

显示：块

，而右侧列表中的锚定则不是这样。只需确保对每个列表应用相同的样式，它们将以相同的方式运行。

我更新了您，您需要对左侧导航栏中的第一个

项设置相同的填充，如下所示

@media (min-width: 768px) {
  .contact-links.navbar-nav > li.header-link-container:nth-child(1) {
    padding-bottom: 15px;
    padding-top: 15px;
  }
}

---

应该这样做。

“正确”本身没有意义。必须根据预期结果定义它。：-）傻傻的。假设正确对齐=“导航栏中与公共水平线相交的所有可视对象的顶部”。你能帮我吗？：-）我注意到你的问题有一个CSS标签，但是你的样式表在哪里？通常，冲突的风格是造成这种情况的原因。也许你可以把CSS放在你的JSFIDLE中，或者编辑你的帖子并添加到那里？这真的能帮我找出问题所在。谢谢Brendan。我只使用引导样式表。在房间里“jsfiddle.YES的外部资源。绝对是这样！然而，还有最后一个问题。在比mobile更大的屏幕上，我仍然有左边的第一个列表元素没有填充整个块，因此使文本看起来不对齐。再见，谢谢！

display的boostrap.css的第7行有一条奇怪的规则：无！重要信息

这是个障碍：

可见xs、.visible sm、.visible md、.visible lg{display:none！重要信息；}

您必须以某种方式删除或覆盖它。谢谢！然而，这个答案并不令人满意，因为我仍然不明白为什么这个链接没有与其他链接对齐！我已经更新了小提琴：