基础网站6.4.3 menu-align mixin无效

Question

我无法使用mixin menu-align（右）或menu-align（center）来使用Foundation 6.4.3。无论我在菜单对齐mixin中放置什么，结果始终相同，菜单始终保持对齐。可能有我做错的事情，但我无法弄清楚它是什么。

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

如果你能指出我正确的方向，我会很感激。

感谢Pablo Viva

Answer 1

如果我理解您正试图移动文本的问题。您可以使用文本右键和文本中心来执行此操作。

  .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;
  }