Question

我有一个使用基础的简单顶栏，编码如下..

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="default.html"><img src="http://dev.golightlyplus.com/wig/website/images/wig-logo.png" alt="Home"></a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Team</a></li>
    </ul>
  </div>
</div>

它的代码是here。

我想要做的是将右侧菜单与徽标中间垂直对齐。我可以在顶级右侧班级上方申请保证金..但是在基金会6中有更聪明的方法吗？

使用像Equalizer这样的东西会有意义吗？

感谢。

Answer 1

这是一个有效的demo.

首先，将position的{{1}}设为top-bar。

relative

然后，将.top-bar { position: relative; }中.menu的位置设置为top-bar-right并使用转换：

absolute

Answer 2

非常怀疑你仍然需要这方面的帮助，但是对于任何偶然发现这种情况的人，请使用上述方法，但为id添加top-bar。我给了我一个id #main-nav。

使用规定的CSS代码并定位#main-nav，您应该会再次看到它。

如何在Foundation中垂直对齐徽标和菜单？

2 个答案: