如何排列清单项目

Question

我无法按照自己喜欢的方式坐着nav，标题很好，但是ul坐得不正确。

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

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
}

<div class="nav">
  <h2>hackeryou</h2>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Bootcamp</li>
      <li>Part-Time</li>
    </ul>
  </nav>
</div>

我希望h2保持在左边，但我希望其他所有移动都在右边。

Answer 1

您实际上并不需要justify-content: space-between的{​​{1}}，因为整个nav ul已经向右移动。只需根据需要向nav添加margin-请参见下面的演示

nav ul li

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

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
  margin: 10px; /* ADJUST THIS */
}