css - 导航栏行未垂直对齐

Question

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

http://jsfiddle.net/blisstdev/ZrA3u/10/

http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/

如你所见，左边比右边低!

此外，左侧“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>

Answer 1

在小屏幕上， anchor 设置为 display: block，而右侧列表中的 anchor 不是这种情况。只需确保对每个列表应用相同的样式，它们就会以相同的方式运行。