justify-content: space-between不生效，导航项无法分散排列求助

你的问题核心是flex容器（ul）没有足够的可用宽度，导致justify-content: space-between无法生效，具体分析和解决如下：

问题代码 #

CSS代码

@import url("https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@100;200;300;500&family=Nunito+Sans:wght@300&display=swap");

* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

nav {
  display: flex;
  width: 100%;
  margin: 0;
  align-items: center;
}

nav ul {
  display: flex;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  display: flex;
  justify-content: space-between;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gaming Campus</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>Accueil</li>
        <li>Business school</li>
        <li>Ecoleesport</li>
        <li>Cours de jeuvidéo</li>
        <li>Le campus</li>
        <li>Newsroom</li>
        <li>Parents</li>
        <li>FR/EN</li>
      </ul>
    </nav>
  </body>
</html>

原因分析 #

1. ul元素未设置宽度：虽然nav占了100%宽度，但ul作为flex容器，默认宽度是内容宽度（所有li加起来的总宽度），没有多余空间让justify-content: space-between分配间距，所以列表项会挤在一起。
2. li上的冗余样式：li是单个文本的容器，设置justify-content: space-between完全无效，属于多余代码。

解决方法 #

给ul设置宽度占满nav的可用空间，同时移除li上的无效样式：

修改后的CSS：

@import url("https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@100;200;300;500&family=Nunito+Sans:wght@300&display=swap");

* {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

nav {
  display: flex;
  width: 100%;
  margin: 0;
  align-items: center;
}

nav ul {
  display: flex;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 关键：让ul占满nav的宽度 */
  padding: 0 1rem; /* 可选：加左右内边距避免贴边 */
}

nav ul li {
  display: flex;
  /* 移除无效的justify-content: space-between */
}

这样设置后，ul拥有了100%的宽度，justify-content: space-between就能把剩余空间均匀分配到li之间，实现列表项分散对齐的效果。

内容的提问来源于stack exchange，提问作者FarBeyond