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

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>
  );
}