css - Zurb Foundation 中的 Flexbox 拉伸(stretch)和垂直居中多行文本

Question

在 Zurb 基础元素中，我在菜单中使用 Flexbox 以允许添加和删除将自动调整的菜单项。在大屏幕上这似乎工作得很好，但其中一个必需的菜单项有点长，并且在为中等屏幕调整大小时它会中断到第二行。这导致菜单变得巨大。当我更改行高时，它会使悬停 Action 太小并沿顶部对齐。因为我连续使用拉伸(stretch)，所以我似乎无法让它正常工作。

在实现悬停效果时，长菜单项断成两行时，如何让菜单保持在正确的高度？

<div class="sticky">
  <nav class="top-bar hide-for-small" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name"></li>

      <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
    </ul>

    <section class="top-bar-section">
      <ul class="full-width">
        <li id="top-bar-logo" style="display:none;"><a href="#"><img src="img/iowa-sm-mono.png"></a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Member Benefits</a></li>
        <li><a href="#" class="farmer-resources">Farmer Resources</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </section>

  </nav>
 </div>

CSS:

.top-bar-section > ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

}

.top-bar-section > ul > li {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    flex-grow: 1;
    flex-direction: row;

}



.top-bar-section li:not(.has-form) a:not(.button) {
    color:#d1d1d1;
    font-weight: 300;
    font-size: 1em;
    background: transparent;
    background-color: transparent;
    text-align: center;
    align-items: stretch;
    overflow: hidden;
    text-transform: uppercase;
}

.top-bar-section li:not(.has-form) a:not(.button):hover {
    background: #1fa67a;
}

见笔:http://codepen.io/anon/pen/OPxvLL

Answer 1

一种解决方案是将 white-space: nowrap; 添加到您的 css，这样文本就不会换行。

http://codepen.io/anon/pen/ogGVLQ