如何将类为.links的导航菜单移至页面右侧？

你给.links设置了position: absolute，float属性对绝对定位元素完全不起作用，所以之前加float: right没效果是正常的。要让它靠右显示，得用绝对定位的专属属性来调整：

核心修改方案 #

1. 给.links添加right: 0，直接让它的右侧对齐最近的定位父容器（如果没有定位父容器，就对齐视口右侧）
2. 如果你希望.links相对于<header>而不是整个页面定位，给<header>加position: relative，这样绝对定位的子元素会以header为基准

修改后的CSS示例：

header {
  position: relative; /* 可选：让.links相对于header定位 */
}

.navbar {
  padding: 5px;
  background: white;
  display: flex;
  justify-content: space-between;
}

.ls,
.rs {
  display: flex;
  align-items: center;
}

.links {
  background: white;
  position: absolute;
  padding: 5px;
  right: 0; /* 关键：让元素靠右 */
}

.links ul {
  list-style-type: none;
  padding: 0;
  text-align: right; /* 可选：让列表项内容也右对齐 */
}

.links ul li a {
  display: inline-block;
  padding: 10px;
  /* 去掉之前的float:right，用text-align控制更合理 */
}

额外说明 #

• 绝对定位元素脱离文档流，所以如果它的高度超过header，可能会覆盖下方内容，需要根据实际布局调整header的高度或者给.links设置合适的top值
• 用text-align: right控制列表项对齐，比给每个a标签加float更易维护，也不会出现浮动带来的布局问题

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