Foundation 顶部栏中的按钮样式？

Question

Zurb Foundation 是否可以在顶部栏菜单项中使用普通按钮？这是一个例子：

黑色按钮是我想要完成的。

这是 HTML 目前的样子：

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar="" role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1>
          <a href="/">SiteName</a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon">
        <a href="#"><span>Menu</span></a>
      </li>
    </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li>
        <a href="#">Nav item</a>
      </li>
      <li>
        <a href="#">Nav item</a>
      </li>
      <li>
        <a href="#">Nav item (Should be button)</a>
      </li>
    </ul>
  </section></nav>
</div>

Answer 1

这样试试，可能吗？

* {font-family: Segoe UI;}
nav ul,
nav ul li {margin: 0; padding: 0; list-style: none; background: #99f; overflow: hidden; display: inline-block;}
nav ul li a {text-decoration: none; display: block; width: 100px; margin: 10px; padding: 5px 10px;}
nav ul li a.btn {background: #333; color: #fff; text-align: center; border-radius: 3px;}

<nav>
  <ul>
    <li><a href="#">New Button</a></li>
    <li><a class="btn" href="#">New Button</a></li>
    <li><a href="#">New Button</a></li>
  </ul>
</nav>

Answer 2

当然，只需在 has-form 列表项中使用 class button。

   <li class="has-form">
        <a class="button">Button</a>
   </li>

演示：http://codeply.com/go/00cVHQ15Px

Foundation 顶部栏中的按钮样式？

Button style in top bar in Foundation?

css

zurb-foundation

zurb-foundation-5