Antd Menu设置justify-content:space-between仍存在首尾间距问题

这个问题源于Antd水平Menu组件的内部容器默认带有左右内边距，即便设置了justify-content: space-between，菜单首尾仍会残留空白间距，可通过以下两种方式解决：

方法一：直接在Menu组件内覆盖内边距 #

修改Menu组件的style属性，添加paddingLeft: 0和paddingRight: 0，消除默认内边距：

<Menu
  mode="horizontal"
  defaultSelectedKeys={["mail"]}
  style={{ 
    border: "1px solid grey", 
    justifyContent: "space-between",
    paddingLeft: 0,
    paddingRight: 0
  }}
>
  {/* 菜单内容 */}
</Menu>

方法二：通过自定义CSS类全局覆盖 #

在index.css中添加自定义样式，精准覆盖Antd Menu的默认内边距：

.custom-horizontal-menu.ant-menu-horizontal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

然后为Menu组件添加对应类名：

<Menu
  mode="horizontal"
  defaultSelectedKeys={["mail"]}
  className="custom-horizontal-menu"
  style={{ 
    border: "1px solid grey", 
    justifyContent: "space-between"
  }}
>
  {/* 菜单内容 */}
</Menu>

额外提示 #

你的代码里有两个Menu.Item使用了相同的key="mail"，这会触发React的key重复警告，建议修改为唯一值，比如将最后一个菜单的key改为"six"。

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