Ant Design水平Menu组件内边距与菜单项间距问题修复

问题 #

使用Ant Design的Menu组件时遇到两个样式问题：

• Menu组件的padding-left与padding-right不一致；
• MenuItem之间的间距不一致。

相关代码（demo.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;

解决方案 #

1. 统一Menu左右内边距

Ant Design水平Menu默认左右内边距值不相等，在index.css中添加以下样式覆盖默认值：

.ant-menu-horizontal {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

可根据需求调整具体数值，确保左右内边距一致即可。

2. 统一MenuItem间的间距

原代码中使用justify-content: space-between会导致子项间距不均，可通过两种方式解决：

• 方式一：移除justify-content，设置统一margin
  先修改Menu组件的style，删除justify-content: space-between，再在index.css中添加：

  .ant-menu-horizontal > .ant-menu-item,
  .ant-menu-horizontal > .ant-menu-submenu {
    margin: 0 16px;
  }
  

• 方式二：保留两端对齐，使用gap属性
  修改Menu的style，用gap控制子项间距：

  <Menu
    mode="horizontal"
    defaultSelectedKeys={["mail"]}
    style={{ border: "1px solid grey", display: "flex", gap: "16px", justifyContent: "space-between" }}
  >
  

  这种方式既能保持两端对齐，又能让子项间的间距统一。

内容的提问来源于stack exchange，提问作者CCCC