如何实现等距布局的固定定位Navbar？及链接空格选中问题

一、解决固定定位与均匀布局兼容问题 #

你当前的导航栏通过text-align: justify配合伪元素实现了链接均匀分布，但添加position: fixed后失效，核心原因是固定定位元素需要显式设置宽度，否则会收缩为内容宽度，导致text-align: justify无法生效。

修改后的CSS方案：

.navbar {
  position: fixed; /* 添加固定定位 */
  top: 0;
  left: 0;
  width: 100%; /* 强制占满视口宽度 */
  text-align: justify;
  border: dotted blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  box-sizing: border-box; /* 避免边框撑宽元素 */
  background: white; /* 添加背景，防止下方内容穿透 */
}

.navbar a {
  text-decoration: none;
  display: inline-block; /* 确保链接高度可点击区域完整 */
  padding: 0.5em 0; /* 增加内边距提升点击体验 */
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.navbar:after {
  content: '';
  width: 100%;
  display: inline-block;
  height: 0; /* 避免伪元素占用额外高度 */
}

关键说明：

• 固定定位元素必须设置width: 100%，保证text-align: justify能作用于整个视口宽度
• box-sizing: border-box防止边框超出视口范围
• 给链接添加inline-block和内边距，优化点击交互体验
• 伪元素加height: 0，避免额外占用导航栏高度

二、避免链接间长空格被选中的快速方案 #

text-align: justify产生的空白会被鼠标选中，以下两种方案可快速解决：

方案1：给伪元素禁用选中 #

给.navbar:after添加user-select: none，让伪元素生成的空白无法被选中：

.navbar:after {
  content: '';
  width: 100%;
  display: inline-block;
  height: 0;
  user-select: none; /* 禁止选中伪元素的空白区域 */
}

方案2：改用Flex布局替代justify（更推荐） #

Flex布局天生支持均匀分布，且不会产生可选中的空白，代码更简洁：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between; /* 自动均匀分布链接 */
  border: dotted blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  box-sizing: border-box;
  background: white;
  padding: 0.5em; /* 调整内边距优化布局 */
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

HTML结构无需修改，Flex布局会自动处理链接的均匀分布，完全规避空白被选中的问题。

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