我正在尝试制作一个在较小屏幕上隐藏文本的导航栏。我无法让栏正确对齐!
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>
最佳答案
在小屏幕上, anchor 设置为 display: block
,而右侧列表中的 anchor 不是这种情况。只需确保对每个列表应用相同的样式,它们就会以相同的方式运行。
关于css - 导航栏行未垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23305528/