如何在菜单标头中固定徽章位置与蚂蚁设计反应

Question

我试图将一个元素徽章放在我的页面中的标头菜单的右侧，但我不知道这是如何的，目前，ant Design的菜单元素将徽章推向另一个位置（贝尔图标）：

代码：

const HeaderComp = (props) => {
let navigation = useNavigate()
const root= AppConfig.BucciaratiRoot.length>0 ? "/"+AppConfig.BucciaratiRoot:"/"

return (
  <Layout>
    <Header className="header" style={{position:'fixed', zIndex: 1, width:   '100%'}}>            
        <div style={{float:'left', marginRight:'5%'}}>
            <img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
        </div>
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
            <Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
            <Menu.Item key="3">About</Menu.Item>
        </Menu> 
        <div style={{float:'right', marginLeft:'5%'}}>
            <Badge dot>
                <BellOutlined />
            </Badge>
        </div>    
    </Header>
  </Layout>  
 )
}

该隐如何将标题菜单右侧的徽章放在徽章上？

Answer 1

您可以使用 flex 而不是 float ，但是您想在DIV中右侧的每个元素，而每个Div中的每个元素，并使用一些元素 Jusify-content：“之间的空间” flex 中的属性您可以使纳维托中的空间在divs之间留在磁带中。
在flexbox上查看更多信息

您的代码应该看起来像：

return (
<Layout>
    <Header
        className='header'
        style={{
            position: "fixed",
            zIndex: 1,
            width: "100%",

            display: "flex", // make the header flex
            justifyContent: "space-between", // put all the space between the left and right sections of the menu
        }}
    >
        <div className='header-left'>
            {/* The left side of the menu */}

            <div style={{ /* remove float */ marginRight: "5%" }}>
                <img
                    style={{ width: 120, height: 31 }}
                    src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png'
                />
            </div>
            <Menu
                theme='dark'
                mode='horizontal'
                defaultSelectedKeys={["1"]}
            >
                <Menu.Item key='1' onClick={() => navigation(root)}>
                    Home
                </Menu.Item>
                <Menu.Item key='3'>About</Menu.Item>
            </Menu>
        </div>

        <div className='header-right'>
            {/* The right side of the menu */}
            <div style={{ /* remove float */ marginLeft: "5%" }}>
                <Badge dot>
                    <BellOutlined />
                </Badge>
            </div>
        </div>
    </Header>
</Layout>
);

Answer 2

<Layout>
    <Header
        className="header"
        style={{
            position: 'fixed',
            zIndex: 1,
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
        }}
    >
        <div>
            <div style={{ marginRight: '5%' }}>
                <img
                    style={{ width: 120, height: 31 }}
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"
                />
            </div>
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                <Menu.Item key="1" onClick={() => navigation(root)}>
                    Home
                </Menu.Item>
                <Menu.Item key="3">About</Menu.Item>
            </Menu>
        </div>

        <div style={{ marginLeft: '5%' }}>
            <Badge dot>
                <BellOutlined />
            </Badge>
        </div>
    </Header>
</Layout>;