保证金：0自动无效

Question

保证金究竟需要什么：0自动工作？它通常适合我，但出于某种原因，在这种特殊情况下，我无法集中我的导航菜单。 小提琴附在下面。

.item-list {
  display: flex;
  margin: 0 auto;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

https://jsfiddle.net/wwf1at2n/1/

Answer 1

由于您使用的是flexbox，因此可以将justify-content: center添加到.item-list规则中（无边距：需要自动）：

.item-list {
  display: flex;
  justify-content: center;
}

.item {
  margin-left: 10px;
  list-style: none;
}

.item a {
  color: #37302b;
  font-size: 20px;
}

header {
  position: inherit;
  height: 50px;
}

<header>
  <nav class="desktop-nav">
    <ul class="item-list">
      <li class="item active">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Home</a>
      </li>
      <li class="item">
        <a href="http://localhost:8888/gross-daily/main.html" data-scroll>Newest</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Most Popular</a>
      </li>
      <li class="item">
        <a href="#projects" data-scroll>Categories</a>
      </li>
      <li class="item">
        <a href="#blog" data-scroll>Stash</a>
      </li>
      <li class="item">
        <a href="#">Contact</a>
      </li>
      <li class="item" onclick="showSearch();">
        <a href="#">Search</a>
      </li>
    </ul>
  </nav>
</header>

Answer 2

添加justify-content: center;，因为您使用的是display: flex

Answer 3

margin: 0 auto;需要块级元素才能在正常情况下工作。