如何正确居中导航栏？

Question

我知道，很多人都问过这个关于如何使导航栏居中的问题，但是当我应用这个 CSS 时，它使它居中但它使导航栏稍微向右对齐：

nav {
  text-align: center;
}

nav li {
  display: inline-block;
}

这可能是由于某些列表项的长度不同，还是您认为这是一个不同的问题？

Answer 1

您的 <ul> 很可能有一个 padding-left，因为这是默认值。只需在开发人员工具中检查它即可。

nav {
  background: #999;
  text-align: center;
}
nav li {
  background: #ccc;
  display: inline-block;
}

<nav>
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
  </ul>
</nav>

只需在适当的 <ul> 上应用 padding-left:0; 即可解决此问题。

How to center a navigation bar properly?