React项目中如何将globe图标显示在Navbar容器组件的最右端

解决方案 #

核心问题 #

你当前的布局失效是因为flex布局下的右侧容器没有设置强制右对齐的规则，left属性在未设置定位的元素上不生效，同时下拉框的定位规则和按钮定位冲突导致出现双图标。

样式代码修改 #

直接替换你的styled-components对应部分即可：

import styled from 'styled-components';
import { Link as LinkR } from 'react-router-dom'

export const NavbarContainer = styled.div `
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 500px;
    z-index: 1;
    width: 80%;
    padding-top: 20px;    
    max-width: 1100px;
    margin: 0 auto;
`;

export const NavLogo = styled(LinkR)
`
    padding-top: 10px;
    padding-left:25px;
`;

export const Icon = styled.div `
    display:block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
`;

export const RoundButton = styled.button `
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 0px;
    height: 40px;
    width: 40px;
    border: 1px solid rgb(38, 36, 57);
    background-color: rgb(28, 26, 40);
    cursor: pointer;
    display: flex;
`;

export const LanguageButtonWrapper = styled.div `
    position:relative;    
    margin-left: auto;
    padding-top: 10px;
    margin-right: 25px;
`;

双图标问题修复 #

1. 不需要给RoundButton设置position: absolute，已经通过flex布局实现了右对齐
2. 修改Navbar组件里的下拉框定位参数，让下拉框靠右对齐避免和按钮重叠：

<LanguageDropdown
    isVisible={flagDropdownIsVisible}
    setIsVisible={setFlagVisibility}
    position={{ right: 0 }}
/>

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