Я хочу выровнять по правому краю элемент подменю, находящийся в компоненте меню, с другими элементами меню. До сих пор я пробовал style = {{float: right}}, но он не выравнивает его, я поместил несколько пустых кнопок между другими пунктами меню и моей в pu sh пункт меню справа, но он продолжает колебаться. Я хочу, чтобы только это подменю было справа от горизонтального меню, я использую ReactJS и компонент меню из «antd»: «^ 2.13.6». Мой код:
return (
<Menu mode='horizontal'>
<Menu.Item >
<Link to='/'>
<Icon type='home' /><text style={{fontWeight: "bold"}}> Home</text>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='popular'>
<Icon type='heart-o' /> <text style={{fontWeight: "bold"}}>Popular</text>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='upcoming'>
<Icon type='like-o' /> <text style={{fontWeight: "bold"}}>Up Coming</text>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='nowplaying'>
<Icon type='rocket' /> <text style={{fontWeight: "bold"}}>Now Playing</text>
</Link>
</Menu.Item>
<SubMenu style={{float:'right'}} title={ <text style={{fontWeight: "bold"}}>Diana</text>}>
<Menu.Item key="setting:1">Get Recs</Menu.Item>
<Menu.Item key="setting:2">Dashboard</Menu.Item>
<Menu.Item key="setting:3" onClick={() => this.logout()}>
<Link to='/' onClick={() => this.logout()}>
<Icon onClick={() => this.logout()}/> <text style={{fontWeight: "bold"}}>Logout</text>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
)
Вот изображение того, что я получаю при запуске кода и что я хочу получить https://imgur.com/a/pYw97TV