Question

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

当长菜单项突破到两行同时实现悬停效果时，如何让菜单保持正确的高度？

<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

Flexbox在Zurb Foundation中拉伸和垂直居中多行文本

1 个答案: