如何正确居中导航栏？

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>

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