基础 6：包装时的顶部栏左右堆栈答案

【问题标题】：Foundation 6: top-bar-right and left stack when wrapping基础 6：包装时的顶部栏左右堆栈
【发布时间】：2019-05-25 09:50:08
【问题描述】：

使用 Zurb Foundation 6 设计网页时，将导航菜单堆栈的左上栏和右上栏放入包装类时，即使缩放到全屏也是如此。右上栏最终位于左下并从左上栏缩进。如何解决此问题，以使右上栏与左上栏保持一致且不堆叠？

当 wrap 类未应用于 nav 类中的 div 时，右上角的部分可以正常工作。我尝试仅将 wrap 类应用于 top-bar-left 而不是整个 nav 类，并且还尝试了 CSS 中 top-bar-right 的“float：right”，但两种方法都没有解决问题。

HTML 代码：

<!-- DESKTOP NAVIGATION -->
    <nav class="top-bar">
        <div class="wrap">
          <div class="top-bar-left">
            <h3>Site Title</h3>
          </div> 
          <div class="top-bar-right">
            <ul class="menu">
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div> 
    </nav>

还有 CSS：

/*GENERAL*/
.wrap {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

【问题讨论】：

标签： zurb-foundation navbar wrapper zurb-foundation-6

【解决方案1】：

顶栏上有一些属性使其依赖项显示为内联并堆叠以用于窄显示（display: flex 为其中之一）。您也可以将所有适当的属性应用于wrap 类，但为什么要重新发明轮子呢？这不是首先否定了使用网格系统的全部原因吗？尝试删除多余的 div 并将 wrap 类放在 nav 元素上：

    <nav class="top-bar wrap">
      <div class="top-bar-left">
        <h3>Site Title</h3>
      </div> 
      <div class="top-bar-right">
        <ul class="menu">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

或者为了简化一些事情，你可以把这些属性放在 .top-bar 上而不是包装类：

.top-bar {
    width: 90%;
    max-width: 1100px;
    margin: 0px auto;
}

如果您需要包装 div，请将其放在顶部栏之外，而不是内部。

【讨论】：