Foundation Sites 6.4.3 menu-align mixin 不起作用

Question

我无法使 mixin menu-align(right) 或 menu-align(center) 与 Foundation 6.4.3 一起使用。不管我在 menu-align mixin 中放了什么，结果总是一样的，菜单总是左对齐的。可能是我做错了什么，但我不知道是什么。

这是我的 HTML 代码和我的 SASS：

.main-header {
  @include xy-grid;
}

.left-nav {
  @include xy-cell(auto, true, $grid-padding-gutters, padding, right left);
  background-color: blue;
}

.right-nav {
  @include xy-cell(auto, true, $grid-padding-gutters, padding, right left);
  background-color: red;
}

.main-menu {
  @include menu-base;
  @include menu-align(left);
  @include menu-direction(horizontal);
}

.language-menu {
  @include menu-base;
  @include menu-align(right);
  @include menu-direction(horizontal);
}

<header class="main-header">
  <nav class="left-nav">
    <ul class="main-menu">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
  <nav class="right-nav">
    <ul class="language-menu">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </nav>
</header>

您可以在屏幕截图中看到红色 div 的菜单项应该向右对齐。

如果您能指出正确的方向，我将不胜感激。

感谢巴勃罗万岁

Answer 1

如果我理解您试图移动文本的问题。您可以使用 text-right 和 text-center 来执行此操作。

  .language-menu {
  @include menu-base;
  @include menu-align(right);
  @include menu-direction(horizontal);
  @include text-right;
  }


  .main-menu {
  @include menu-base;
  @include menu-align(left);
  @include menu-direction(horizontal);
  @include text-center;
  }