Foundation顶部栏中的按钮样式？答案

【问题标题】：Button style in top bar in Foundation?Foundation顶部栏中的按钮样式？
【发布时间】：2015-06-17 20:29:02
【问题描述】：

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>

【问题讨论】：

标签： css zurb-foundation zurb-foundation-5

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

试试这样，可以吗？

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

【讨论】：