Html 如何使SCS中的导航条居中，而不扰乱subnav对齐？

我在网上找到了一个nav菜单的例子，它符合我的需要，并且是用Sass（或scss）设计的，但是有点麻烦

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

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

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

我有一个nav元素和一个ul子元素，一些li有一个ul（即，一些链接有子nav菜单）。我试图将导航栏居中，但无论我添加了什么样式，最终都会更改subnav菜单，它将显示在上面导航链接右侧约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>

以下是我在构建这个问题时得出的结论：

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

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

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

nav {
  text-align: center;
}

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

但是，这也将“内联块”显示模式应用于“li”、“a”和subnav“ul”元素，从而影响subnav对齐。解决方案是确保“内联块”仅适用于“ul”，它是“nav”的直接后代：

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

nav > ul {
    display: inline-block;
}

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

---

在这一点上，我的问题是“哪个元素不应该有‘内联块’样式，还有其他方法可以避免吗？”

尝试在

nav

中使用

flexbox

，它比其他解决方案简单得多：

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

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