Как я могу сделать подменю (antd) в горизонтальном меню, чтобы оно выровнялось по правому краю, в то время как другие menuItems выровнены по левому краю? - PullRequest
0 голосов
/ 10 июля 2020

Я хочу выровнять по правому краю элемент подменю, находящийся в компоненте меню, с другими элементами меню. До сих пор я пробовал 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...