如何平均放置不同长度的物品

Question

我刚刚注意到justify-content: space-evenly;从中间隔开项目，因此长于另一个的项目在项目之间造成了不均匀的空间。

我尝试了环绕，我以为应该解决它，但是同样的问题。

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  text-align: center;
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
}

.nav {
  position: sticky;
  left: 0;
  border-radius: 0px;
  border: none;
  margin-right: 10%;
  margin-left: 10%;
  width: 80%;
  text-align: center;
  padding: 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
  cursor: default;
}

@media screen and (max-width: 1000px) {
  .nav {
    position: sticky;
    left: 0;
    border-radius: 0px;
    border: none;
    margin: auto;
    width: 100%;
    text-align: center;
    padding: 0;
    flex-direction: row;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
  }
}

<nav>
  <ul class="nav">
    <li class="item">
      <a href="index.html">
        <img src="../Images/Navigation/Intak Nav Mark.png" alt="Home" />
      </a>
    </li>
    <li class="item" style="color:#4D4D4D;">Printing
    </li>
    <li class="item"><a href="Graphic Design.html">Graphic Design</a>
    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
        <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
        <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
        <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
        <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
        <li><a href="Calendars/Lucky Money Envelopes.html">Lucky Money Envelopes</a></li>
        <li><a href="Calendars/More.html">More Calendars</a></li>
      </ul>
    </li>
    <li class="item"><a href="Contact Us.html">Contact Us</a></li>
  </ul>
</nav>

我正在尝试使各个项目之间保持均匀的间隙，而不考虑项目的长度

Answer 1

这应该可以解决

justify-content:space-between;