如何将React导航栏中的搜索框定位至右上角？

问题根源 #

当前导航栏未设置合理的布局规则，导致logo与搜索框默认垂直排列；同时搜索框的宽高参数设置错误，无法实现右上角定位效果。

修改方案 #

通过调整导航栏的CSS布局，利用弹性布局实现左右元素分离，并修正搜索框的样式参数：

修改后的CSS代码

.navbar {
  width: 100%;
  height: 50px;
  background-color: rgb(32, 32, 32);
  /* 启用弹性布局，实现左右元素分布 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  color: aqua;
  font-size: 1.8rem;
  font-family: "Orbitron", sans-serif;
  line-height: 40px;
  margin-left: 20px;
}

.navbar .searchBox {
  color: aqua;
  font-size: 1.8rem;
  font-family: "Orbitron", sans-serif;
  display: flex;
  align-items: center;
  /* 移除无效的宽高设置，添加右侧间距平衡视觉 */
  margin-right: 20px;
  /* 可根据需求设置搜索框容器宽度，避免过宽/过窄 */
  width: 300px;
}

关键修改说明 #

• 给.navbar添加display: flex和justify-content: space-between，强制logo居左、搜索框居右；align-items: center确保所有元素垂直居中
• 删除.searchBox中无意义的height: 1%和width: 100%，避免搜索框占满整个导航栏宽度
• 给.searchBox设置margin-right: 20px，与logo的左侧间距保持视觉对称
• 可选：固定.searchBox的宽度，让搜索区域尺寸更可控

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