如何在ReactJs的box组件的最左边显示我的图标?



我想把我的地球仪图标显示在框的最右边(我用红色标记的)我什么都试过了,但它就是不动。如果我将位置更改为绝对,它会以某种方式给我双球形图标。我也尝试过对齐内容,边距和填充,但没有任何效果。如果有人知道如何改变,请帮助。

地球仪图标

const Navbar = () => {
const [flagDropdownIsVisible, setFlagVisibility] = useState(false);
return (
<>
<NavbarContainer>
<NavLogo to= '/'>
<img src={logo} alt='logo' width="150" height="30" />
</NavLogo>

<LanguageButtonWrapper>
<RoundButton onClick={() => setFlagVisibility(true)}>
<img src= {globe} alt="" />
</RoundButton>

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

</NavbarContainer>
</>
)
}
export default withTranslation() (Navbar);

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

export const NavbarContainer = styled.div `
display: flex;
justify-content: space-between;
height: 500px;
z-index: 1;
width: 80%;
padding-top: 20px;    
max-width: 1100px;
`;
export const NavLogo = styled(LinkR)
`
left:0;
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 `
-moz-box-align: center;
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);
position: relative;

cursor: pointer;
display: flex;
`;
export const LanguageButtonWrapper = styled.div `
position:relative;    
`;

这是我执行更改后的结果

try this:

<NavbarContainer>
<NavLogo to='/'>
<img src={logo} alt='logo' width='150' height='30' />
</NavLogo>
<LanguageButtonWrapper>
<LanguageDropdown
isVisible={flagDropdownIsVisible}
setIsVisible={setFlagVisibility}
position={{ left: 0 }}
/>
</LanguageButtonWrapper>
<Filler />
<RoundButton onClick={() => setFlagVisibility(true)}>
<img src={globe} alt='' />
</RoundButton>
</NavbarContainer>

和填充符是:

const Filler = styled.div`
flex: 1;
`

也改变NavbarContainer的宽度为100%100vw

最新更新