Ant design - 菜单项之间的自定义间距答案

【问题标题】：Ant design - custom spacing between menu itemAnt design - 菜单项之间的自定义间距
【发布时间】：2022-11-12 23:28:56
【问题描述】：

我有一个 Menu 组件

可以看到，Menu Component 有两个问题

1. The padding-left and padding-right(red arrows) are not the same
2. The spacing between MenuItem(blue arrows) is not the same.

如何更新样式以解决上述问题？

演示.js

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Menu } from "antd";
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined
} from "@ant-design/icons";

const App = () => (
  <Menu
    mode="horizontal"
    defaultSelectedKeys={["mail"]}
    style={{ border: "1px solid grey", justifyContent: "space-between" }}
  >
    <Menu.Item key="mail" icon={<MailOutlined />}>
      Navigation One
    </Menu.Item>
    <Menu.SubMenu
      key="SubMenu"
      title="Navigation Two - Submenu"
      icon={<SettingOutlined />}
    >
      <Menu.Item key="two" icon={<AppstoreOutlined />}>
        Navigation Two
      </Menu.Item>
      <Menu.Item key="three" icon={<AppstoreOutlined />}>
        Navigation Three
      </Menu.Item>
      <Menu.ItemGroup title="Item Group">
        <Menu.Item key="four" icon={<AppstoreOutlined />}>
          Navigation Four
        </Menu.Item>
        <Menu.Item key="five" icon={<AppstoreOutlined />}>
          Navigation Five
        </Menu.Item>
      </Menu.ItemGroup>
    </Menu.SubMenu>
    <Menu.Item key="mail" icon={<MailOutlined />}>
      Navigation Six
    </Menu.Item>
  </Menu>
);

export default App;

代码沙盒
https://codesandbox.io/s/basic-usage-deprecated-syntactic-sugar-antd-4-22-4-forked-m4p6vh

【问题讨论】：

标签： javascript css reactjs antd

【解决方案1】：

您可以将所有菜单选项放在一个nav 标记中，并在其中添加menubar 类。

CSS

.menubar {
  /*current style properties + */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

【讨论】：

你能更新 Codesandbox 吗？谢谢

【解决方案2】：

我的建议是，您应该使用 Flex 来对齐 UI。 Flex 可以在任何尺寸的屏幕上工作。而且遇到你的问题，可以通过下面的例子来解决

.yourClassName{
    display:flex;
    justify-content:'space-evenly'
 };

Space evenly 将为类中的所有元素添加空间，无论它们的大小如何

【讨论】：

我试过了，但看起来还是不均匀

【解决方案3】：

我不确定你是否想将它分布在整个宽度上，但一个很好的解决方案是将它放在<Space></Space> 之间（看看这里：https://ant.design/components/space/）：

<Space>
  <Menu
    mode="horizontal"
    defaultSelectedKeys={["mail"]}
    style={{ border: "1px solid grey", justifyContent: "space-between" }}
  >
    <Menu.Item key="mail" icon={<MailOutlined />}>
      Navigation One
    </Menu.Item>
    <Menu.SubMenu
      key="SubMenu"
      title="Navigation Two - Submenu"
      icon={<SettingOutlined />}
    >
      <Menu.Item key="two" icon={<AppstoreOutlined />}>
        Navigation Two
      </Menu.Item>
      <Menu.Item key="three" icon={<AppstoreOutlined />}>
        Navigation Three
      </Menu.Item>
      <Menu.ItemGroup title="Item Group">
        <Menu.Item key="four" icon={<AppstoreOutlined />}>
          Navigation Four
        </Menu.Item>
        <Menu.Item key="five" icon={<AppstoreOutlined />}>
          Navigation Five
        </Menu.Item>
      </Menu.ItemGroup>
    </Menu.SubMenu>
    <Menu.Item key="mail" icon={<MailOutlined />}>
      Navigation Six
    </Menu.Item>
  </Menu>
</Space>

【讨论】：