如何分隔列表项答案

【问题标题】：How to space out list items如何分隔列表项
【发布时间】：2019-02-13 00:41:35
【问题描述】：

我无法让我的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 保持在左侧，但我希望其他所有内容在右侧移动得更远。

【问题讨论】：

您到底在寻找什么？您希望导航如何显示？
有很多方法可以实现这一点，包括填充、弹性属性、边距、:before、:after 等。参见：stackoverflow.com/questions/15710701/horizontal-list-items
Horizontal list items的可能重复

标签： html css flexbox navigationbar

【解决方案1】：

对于nav ul，您实际上并不需要justify-content: space-between，因为整个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 */
}

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

【讨论】：