如何将React导航栏中类名为Navbar_icons的div移动到右侧？

解决方案 #

你当前布局失效的核心原因是.Navbar已经设置为flex布局，flex容器的子元素不会响应float属性，所以你给子元素加的float: left和float: right都不会生效。

无需修改现有JSX代码，仅调整CSS即可实现需求，修改后的完整CSS代码如下：

.Navbar{
    height: 80px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 35px;
    display: flex;
    /* 新增属性：让子元素两端对齐 */
    justify-content: space-between;
    /* 新增属性：让子元素垂直居中，可根据实际排版需求调整 */
    align-items: center;
}
.logo{
    font-family: 'Andada Pro', serif;
    color: orangered;
    font-weight: bolder;
    /* 移除无效的float: left属性 */
}
.Navbar_icons{
    display: flex;
    /* 移除无效的position: relative和float: right属性 */
}
.Search, .Help, .Sign_In{
    display: flex;
    /* 新增属性：让图标和对应文字垂直对齐 */
    align-items: center;
    margin-right: 10px;
    text-align:center;
}

justify-content: space-between属性会自动将flex容器内的第一个子元素（logo）靠左侧对齐，最后一个子元素（.Navbar_icons）靠右侧对齐，刚好匹配你的需求。

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