是否可以在Zurb Foundation中创建这样的按钮？

Question

Zurb Foundation是否有办法在顶部栏中创建如下截图的按钮？

这是我目前的代码：

<nav class='top-bar' data-topbar=''>
  <ul class='title-area'>
    <li class='name'>
      <h1><a href="/">My Site</a></h1>
    </li>
    <li class='toggle-topbar menu-icon'>
      <a href='#'>Menu</a>
    </li>
  </ul>
  <section class='top-bar-section'>
    <ul class='right'>
      <li><a href="/tools">TOOLS</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/contact">CONTACT</a></li>
    </ul>
  </section>
</nav>

Answer 1

这可以在任何框架中轻松完成

.top-bar ul{list-style-type:none; }
.top-bar ul li{display:inline; padding:0px 15px;}
.top-bar ul li a{padding:10px 10px; text-decoration:none}
.border{border:3px solid #111}

请参阅DEMO

Answer 2

是的，它非常简单。你需要使用现有的button（）mixin。可以找到here的示例，或者只需要编写自定义按钮css类。