Question

我找到了一个符合我需求的在线导航菜单示例，并在Sass（或scss）中设置了样式，但遇到了一些麻烦。

（注意：我设法自己回答这个问题，但是我不知道为什么会有效。如果我能得到一个解释，或许可以回答这个问题。）

我有一个带有ul子元素的nav元素，有些li有一个ul（即某些链接有子节点菜单）。我试图使导航栏居中，但无论我添加哪种样式，最终都会更改子窗口菜单，这将显示在上面导航链接右侧大约100 px。

    <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 {
  text-align: center;
}

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

然而，这也适用于＆＃39; inline-block＆＃39;显示模式到＆＃39; li＆＃39;＆＃39; a＆＃39;和subnav＆＃39; ul＆＃39;元素，它影响subnav对齐。解决方案是确保＆＃39; inline-block＆＃39;仅适用于＆＃39; ul＆＃39;这是＆nav;＆＃39;

的直接后代

nav > ul {
    display: inline-block;
}

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

此时，我的问题是＆＃34;哪个元素不应该有＆＃39;内联块＆＃39;造型，还有另一种方法可以避免这种情况吗？＆＃34;

Answer 1

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

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

如何将scss样式的导航栏居中，而不会弄乱subnav对齐？

1 个答案: