Question

使用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;
}

Answer 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上，而没有wrap类：

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

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

基础6：包装时，左上和右上堆叠

1 个答案: