基础顶栏元素溢出和破碎

Question

我使用Foundation 6和MEAN堆栈。我使用Gulp访问sass变量。但是在我设置了所有内容之后，顶栏现在已经溢出并且没有留在其父元素中。

这就是它的样子：

正如您所看到的，顶栏左侧和顶栏右侧元素都没有留在其父元素内。我的导航代码几乎与Foundation文档中提供的顶栏代码相同。注意我尝试使用Foundation网站中的代码交换我的代码，但问题没有解决。让我相信问题不在于HTML：

<header class="top-bar" data-topbar role="navigation">
 <div class="top-bar-left">
   <ul class="menu">
     <li class="menu-text"><a ui-sref-active="active" ui-sref="home">GoodThings</a></li>
     <li><a ui-sref="home">Home</a></li>
     <li><a ui-sref-active="active" ui-sref="profile">Profile</a></li>
     <li><a ui-sref-active="active" ui-sref="login" ng-show="!currentUser">Login</a></li>
     <li><a href="#/logout()" ng-show="currentUser">Logout</a></li>
   </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li>
        <input type="search" placeholder="Search">
      </li>
      <li>
        <button type="button" class="button">Search</button>
      </li>
    </ul>
  </div>
</header>

我目前没有使用sass格式化，所以我不知道为什么这会破坏。任何想法????

Answer 1

我似乎无法以任何方式重新创建您的问题......

也许你的项目缺少某些基金会的SASS文件。

您可以尝试在.top-bar-left中包含.top-bar-right和.row.column来包含它吗？

<header class="top-bar" data-topbar role="navigation">
  <div class="row column">
    <div class="top-bar-left">
    ...
    </div>
    <div class="top-bar-right">
    ...
    </div>
  </div>
</header>

Answer 2

其他地方有一些针对ul的css（边距，填充）？使用开发人员工具来寻找这种东西。

[编辑]谁在低估这个评论？为什么？