基金會頂欄中的按鈕樣式？

Question

Zurb基金會有可能在頂欄菜單項中有一個正常按鈕嗎？這裏有一個例子：

的黑色按鈕就是我試圖完成。

這裏是什麼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

當然，僅僅使用button類has-form列表項內。

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

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

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