使用Flex CSS构建导航栏时链接无法居右的问题及解决方法

我之前也碰到过一模一样的问题——用Flex构建导航栏，想把导航链接放到屏幕右侧，结果它们却挤在标题旁边，试了margin-left: auto也没效果。后来才发现问题出在定位元素的宽度上！

问题根源 #

你的nav元素设置了position: fixed，这种定位的元素默认宽度是由内部内容撑开的，而不是自动占满整个视口。所以哪怕你加了justify-content: space-between，也没有足够的水平空间让标题和导航链接分散到两端，自然就挤在一起了。

解决方案 #

给nav添加width: 100%;属性，让它占满整个视口宽度，这样justify-content: space-between就能正常发挥作用，把标题固定在左侧，导航链接推到右侧。

另外建议额外加个box-sizing: border-box，避免padding撑宽导航栏导致横向滚动条，体验更顺畅。

修改后的完整代码 #

CSS 部分

@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
/* font-family: 'Poppins', sans-serif; font-family: 'Montserrat Alternates', sans-serif; */
* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
}
nav {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-content: center;
  background-color: transparent;
  width: 100%; /* 新增：让导航栏占满视口宽度 */
  box-sizing: border-box; /* 可选：防止padding额外撑宽元素 */
}
.name-title {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: xx-large;
  color: #000;
}
nav ul {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
}
nav li {
  list-style: none;
}
nav a {
  font-family: "Poppins", sans-serif;
  font-size: medium;
  padding-right: 2em;
  text-decoration: none;
  color: #000;
}

HTML 部分

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<nav>
  <div class="name-title">Ayush Kumar</div>
  <ul>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

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