如何在不弄乱子导航对齐的情况下以 scss 样式居中导航栏？

Question

我在网上找到了一个导航菜单示例，该示例符合我的需求，并且使用 Sass（或 scss）进行样式设置，但遇到了一点麻烦。

（注意：我在摆弄这个发布时自己设法回答了这个问题，但是我真的不明白它为什么会起作用。如果我能得到一个解释这个问题的答案，也许。）

我有一个带有 ul 子元素的 nav 元素，并且一些 li 有一个 ul（即一些链接有子导航菜单）。我试图使导航栏居中，但无论我添加什么样式，最终都会更改子导航菜单，该菜单将出现在上面导航链接右侧约 100 像素处。

    <li>
        <a href="#">The Journey</a>
        <ul>
            <li><a href="finding.html">Finding your way home</a></li>
            <li><a href="confusion.html">Confusion is normal</a></li>
            <li><a href="mistakes.html">Mistakes are okay</a></li>
            <li><a href="fiddling.html">Fiddling is fine</a></li>
            <li><a href="navigating.html">Become a navigator</a></li>
        </ul>
    </li>
    <li><a href="#">The Power</a>
    <ul>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
            <li><a href="#">Sublink 4</a></li>
        </ul></li>
    <li><a href="#">About</a></li>
    <li><a href="contact.php">Contact</a></li>
  </ul>
  <div style="clear:both;"></div>
</nav>

样式，在 scss 中：

nav {
  /* tried two versions of the following. */
  /* version 1, in which the navbar is centered, but the subnav */
  /* menus are shifted about 100px to the right,: the following */
  /* line is present. */
  /* it is absent in version 2, in which the */
  /* navbar is not centered but the subnav menus are lined up  */
  text-align: center;
}

nav ul {
  /* in version 1 only, the following line is present */
  display: inline-block;

  list-style:none;

  li {
    float:left;
    position:relative;
    z-index:1;
    a {
     display:block;
     padding: $link-vertical-padding $link-horizontal-padding;
     text-align:center;
     color:$link-color;
     text-decoration:none;
     transition: all 0.1s ease;

    &:hover {
      background: $color-bg-nav-hover;
      color:$link-hover;
      transition: all 0.2s ease;
    }

    ul {
      background:  $color-bg-subnav;
      list-style:none;
      padding:0;
      position:absolute;
      width:200px;
      max-height:0;
      z-index:0;
      opacity:0;
      overflow:hidden;
      font-size:.9em;
      box-shadow:0px 2px 2px rgba(0,0,0,.5);
      transition: all 0.3s ease;


      li {
        float:none;
        margin:0;


        a {
                color: #FFFFFF;
          display:block;
          text-align:left;
          padding:$link-vertical-padding/1.5 $link-horizontal-padding/1.5;
          margin:0;
          border-right:none;
          border-top:1px solid darken($menu-background,12%);;
          box-shadow:inset 0px 1px 3px rgba(255,255,255,.03);
          text-transform:none;
          text-shadow:none;
          transition: all 0.2s ease;

          &:hover {
            color:$link-hover;
            background:lighten($menu-background,5%);
            transition: all 0.5s ease;
          }

        }
      }
   }
}

这是我在构建这个问题时发现的：

当目标是使导航栏居中时，它确实有效，可以将此行添加到导航和“nav ul”样式中：

nav {
  text-align: center;
}

nav ul {
  display: inline-block;
....
}

但是，这也会将“inline-block”显示模式应用于“li”、“a”和 subnav 'ul' 元素，这会影响 subnav 对齐。解决方案是确保 'inline-block' 仅应用于作为 'nav' 的直接后代的 'ul'：

nav > ul {
    display: inline-block;
}

nav ul {
  .. the remainder of styling posted in question ..;
}

此时，我的问题是“哪个元素不应该有'inline-block'样式，还有其他方法可以避免吗？”

Answer 1

尝试在nav中使用flexbox，它比其他解决方案容易得多：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}