html - 带有简单文本和链接的 Zurb Foundation 顶部栏？

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>

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

Answer 1

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

例如

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

您Hi, Joe!也应该使用空白a标签。