如何在水平菜单中制作（antd）子菜单以向右对齐，而其他菜单项向左对齐？答案

【问题标题】：How can I make a (antd)Sub-Menu in a Horizontal Menu to align right while other menuItems are aligned left?如何在水平菜单中制作（antd）子菜单以向右对齐，而其他菜单项向左对齐？
【发布时间】：2020-07-10 08:12:59
【问题描述】：

我想将菜单组件中的子菜单项与其他菜单项对齐。到目前为止，我已经尝试过 style={{float:right}}，但是它没有对齐，我在其他菜单项和我的菜单项之间放置了多个空按钮以将菜单项向右推，但它一直在波动。我希望这个子菜单位于水平菜单的右侧，我正在使用来自“antd”的 ReactJS 和菜单组件：“^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

【问题讨论】：

标签： reactjs menu antd

【解决方案1】：

我建议为此使用 styled-components，以便更轻松地进行样式设置。这里是链接：https://styled-components.com/

示例（请先添加样式组件）：

const StyledSubMenu = styled(SubMenu)`
Float : Right;
`;

function example(){
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>
            
            <StyledSubMenu 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>
            </StyledSubMenu enter code here>
        </Menu>
    )
}

【讨论】：