如何在导航栏中居中菜单项，如示例

Question

类似于顶部导航栏的example。

我想要一个居中的菜单项，两个菜单项一直漂浮在导航栏的右边。

到目前为止，我已经想出了如何将两个项目向右浮动，但我不确定如何将标题项目居中。将菜单项居中的antd方法是什么？

<Menu mode="horizontal">
    <Menu.Item>Centered</Menu.Item>
    <Menu.Item style={{float:"right"}}>Right</Menu.Item>
    <Menu.Item style={{float:"right"}}>Right</Menu.Item>
</Menu>

Answer 1

尝试使用flexbox

const centerStyle = {
  position: 'relative',
  display: 'flex',
  justifyContent: 'center'
};

const rightStyle = { position: 'absolute', top: 0, right: 0 };

function App() {
  return (
    <Menu style={centerStyle} mode="horizontal">
      <Menu.Item> Cookies </Menu.Item>
      <Menu.Item> Cookies2 </Menu.Item>
      <Menu.Item style={rightStyle}> Right </Menu.Item>
    </Menu>
  );
}

​

​

​

​