Justify-content:空格-均匀不工作

Question

我正在尝试创建一个响应式导航栏，在中间的同一容器中有三个项目，如下所示。

​

​

由于某些原因，ul项的间距不均匀，它向我显示了以下内容：

​

​

我使用了以下几行代码：

​

nav {
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

ul {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: space-evenly;
}

ul,
li {
  display: inline;
  margin: 0;
  padding: 0;
}

<nav>
  <a href="#home">Home</a>
  <ul>

    <li>
      <a href="#Home">Learn More</a>
    </li>
    <li>
      <a href="#Home">About</a>
    </li>
    <li>
      <a href="#Home">Contact</a>
    </li>

  </ul>
  <a href="#signup">Sign Up</a>
</nav>

​

感谢大家的帮助，如果这篇文章不清楚，我深表歉意；我仍然是这个网站的新手。

Answer 1

似乎解决了这个问题的是将css中的" ul {...}“项更改为"nav ul {...}”。希望这也能在未来帮助其他人。

Answer 2

space-evenly或space-between将会工作！

​

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: block;
  width: 90%;
  margin: 5% auto;
}

nav {
  display: flex;
  justify-content: space-evenly;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li+li {
  margin-left: 1.5rem;
  float: left;
  display: inline-block;
}

<header>
  <nav>
    <a href="">Home</a>
    <ul>
      <li><a href="">Learn More</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>
    </ul>
    <a href="">Sign Up</a>
  </nav>
</header>

​