antd菜单水平模式怎么设置

Question

const Navigation =()=>{
return (
    <>
        <Menu mode={"horizontal"}  style={{
            display: 'flex',
            justifyContent: 'space-around'}} theme={"light"}>
            <Menu.Item key={"home"} >
                홈
            </Menu.Item>
            <Menu.Item key={"message"}>
                쪽지
            </Menu.Item>
            <Menu.Item key={"post"}>
                게시판
            </Menu.Item>
            <Menu.Item key={"homepage"}>
                홈페이지
            </Menu.Item>
        </Menu>

    </>
)}

我用的是react js和antd。我想将项目 Menu.Item justify-content 作为 space-around。但它不像图片那样工作。我应该怎么办？ Menu.Item 应该是 spaced 均匀，但事实并非如此。

Answer 1

您可以将每个 Menu.Item 的宽度设置为 25%，并从 Menu 中移除样式。

但我认为更改这不是一个好主意，因为它会破坏 antd 的某些菜单行为。可能会导致一些意想不到的行为。

const Navigation =()=>{
return (
    <>
        <Menu mode={"horizontal"} theme={"light"}>
            <Menu.Item key={"home"} style={{ width: '25%' }}>
                홈
            </Menu.Item>
            <Menu.Item key={"message"} style={{ width: '25%' }}>
                쪽지
            </Menu.Item>
            <Menu.Item key={"post"} style={{ width: '25%' }}>
                게시판
            </Menu.Item>
            <Menu.Item key={"homepage"} style={{ width: '25%' }}>
                홈페이지
            </Menu.Item>
        </Menu>
    </>
)}

antd菜单水平模式怎么设置

how to antd menu horizontal mode

css

reactjs

antd