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 标签中。