首页 文章

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

提问于
浏览 次
2

我正试图与Zurb Foundation一起推出以下顶级酒吧 .

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

topbar_example

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

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

topbar_example_002

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

<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>

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

html css zurb-foundation

1 回答

  • 3

    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 标签 .

    回复于

相关问题