Zurb foundation 基础5顶栏图标和文本 我试图在Zurb的基础5顶部菜单栏上实现iOS的外观。我想在顶部有一个图标字体图标和下面匹配的菜单描述。看起来像这样的东西：

这就是我现在得到的：

在图标字体中，先有图标后有文字是很简单的：

<div class="contain-to-grid">
<nav class="top-bar" data-topbar> 
<ul class="title-area">
<li class="name">
<h1><a href="#">Site name</a></h1>
</li>
</ul>

<section class="top-bar-section">
    <ul>
     <li class="show-for-medium-up" id="people-menu" data-tooltip data-options="disable_for_touch:true" title="People"><a href="#row1"><i class="fi-results-demographics"></i> <span class="menu-heading"> option 1 </span></a></li>

     <li id="assets-menu" data-tooltip data-options="disable_for_touch:true" title="Assets"><a href="#row2"><i class="fi-euro"></i> <span class="menu-heading"> option 2 </a></li>

     <li id="documents-menu" data-tooltip data-options="disable_for_touch:true" title="Documents"><a href="#row3"><i class="fi-page-edit"></i> option 3 </a></li>     

      <li id="services-menu" data-tooltip data-options="disable_for_touch:true" title="Services"><a href="#row4"><i class="fi-info"></i> Option4 </a></li>

      <li class="divider"></li>

     <li id="login-menu" data-tooltip data-options="disable_for_touch:true" title="Sign in"><a href="#"><i class="fi-key"></i> </a></li>       

     <li id="logout-menu" data-tooltip data-options="disable_for_touch:true" title="Sign out"><a href="#">Example login <i class="icon-bell color6"></i> </a></li>

   </ul>
 </section>

在span之前添加一个
没有帮助，因为它会打断顶部栏，即使span在CSS中没有边距/填充

---

我怎样才能把图标和文本堆栈漂亮地放在上面？

你需要重写一些默认的基础样式，但这绝对是可能的。

尝试一下这些样式：

.top-bar ul>li a:not(.button) {
  line-height: 1em;
  padding-top: 8px;
}

.top-bar ul>li a i {
  display: block;
  height: 16px;
  margin: auto 0;
  line-height: 1em;
  text-align: center;
}

---

您可能需要调整

填充顶部

、

线条高度

和图标高度值，以匹配您的特定设计。

谢谢。成功了。只需要增加顶部的酒吧高度，因为它需要更多的空间了。谢谢你，詹姆斯。不客气。很高兴它对你有用！