Foundation 5 双线顶栏 (CSS)答案

【问题标题】：Foundation 5 double-lined top bar (CSS)Foundation 5 双线顶栏 (CSS)
【发布时间】：2015-05-07 10:38:54
【问题描述】：

我想做什么：

代码：

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

  <section class="top-bar-section">
    <ul class="right">

        <li><a href="#">RETURN<br/>home</a></li>
            <li><a href="#">TASTE<br/>new menu</a></li>
            <li><a href="#">ATTEND<br/>events</a></li>
            <li><a href="#">EXPLORE<br/>our culture</a></li>
            <li><a href="#">BOOK<br/>your place</a></li>

        </ul>
      </li>
    </ul>
</section>
</nav>
      </div>

然而，我实际看到的是这样的：

怎样做才能得到我想要的？另外，如何增加顶部栏的高度，使所有内容保持垂直居中？

【问题讨论】：

在这里也发布相关的css。

标签： html css zurb-foundation multiline navigationbar

【解决方案1】：

删除不必要的标记闭包并在您的代码中制作适当的缩进，因为这将帮助您发现错误，因为这些闭包更快。。李>

<div class="contain-to-grid">
	<nav class="top-bar" data-topbar role="navigation">
		<ul class="title-area">
			<li class="name"><h1><a href="#">LOGO</a></h1></li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>
		<section class="top-bar-section">
			<ul class="right">
				<li><a href="#">RETURN<br/>home</a></li>
				<li><a href="#">TASTE<br/>new menu</a></li>
				<li><a href="#">ATTEND<br/>events</a></li>
				<li><a href="#">EXPLORE<br/>our culture</a></li>
				<li><a href="#">BOOK<br/>your place</a></li>
			</ul>
		</section>
	</nav>
</div>

尝试将其粘贴到您的 CSS 中：

.top-bar-section > .right > li > a{
    line-height: inherit;
}

【讨论】：

【解决方案2】：

请使用以下代码，但它不响应（您必须使其响应）：

<div class="contain-to-grid fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name"><h1><a href="#">LOGO</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span</a</li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#">RETURN<br/><span style="float: left;margin-top: -20px;">home</span></li>
            <li><a href="#">TASTE<br/><span style="float: left;margin-top: -20px;">new menu</span></a></li>
            <li><a href="#">ATTEND<br/><span style="float: left;margin-top: -20px;">events</span></a></li>
            <li><a href="#">EXPLORE<br/><span style="float: left;margin-top: -20px;">our culture</span></a></li>
            <li><a href="#">BOOK<br/><span style="float: left;margin-top: -20px;">your place</span></a></li>
        </ul>
    </section>
  </nav>
</div>

【讨论】：