Zurb Foundation Top Bar带有简单的文字和链接？

Question

我正试图与Zurb Foundation一起推出以下Top Bar。

（我知道如何使用简单的HTML做到这一点......试图找出使用Foundation的正确方法。）

所以你在左边有了标题区名称（工作正常），在右边有“你好，乔！”只是纯文本，然后“更改设置”和“注销”是每个链接（这不起作用）。

这是我在构建时发生的事情......

这是我正在使用的代码......

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"><h1><a href="#">Acme Company</a></h1></li>
    <li class="toggle-topbar"><a href="#"></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li>Hi, Joe!</li>
      <li>
        <a href="#">Change Settings</a> | <a href="#">Log out</a>
      </li>
    </ul>
  </section>
</nav>

那么我怎样才能让基金会使用上面的原始设计示例？

Answer 1

Foundation使用a标记来设置样式。最好将它们放在两个单独的li标签中。

e.g。

<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>

您的Hi, Joe!也应该是空白a标记。