如何在 Ant Design 中右对齐菜单项？

Question

有一个开放的 Git 问题，请求用于对齐菜单项的道具。同时，将一些导航栏项目（例如登录、注销）移动到右侧的正确方法是什么？

这是菜单的示例代码，其中所有菜单项都在左侧。

 import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class App extends React.Component {
  state = {
    current: 'mail',
  }
  handleClick = (e) => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  }
  render() {
    return (
      <Menu
        onClick={this.handleClick}
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <Menu.Item key="mail">
          <Icon type="mail" />Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="appstore" />Navigation Two
        </Menu.Item>
        <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
          <MenuItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
        </Menu.Item>
      </Menu>
    );
  }
}

ReactDOM.render(<App />, mountNode);

原文由 rampatowl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试通过 JSX 样式或 CSS 类在右侧提供您想要的菜单项 float: right 。

使用 JSX 内联样式将导航三项拉到右侧的示例， style={{float: 'right'}} ：

     <SubMenu style={{float: 'right'}} title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
      <MenuItemGroup title="Item 1">
        <Menu.Item key="setting:1">Option 1</Menu.Item>
        <Menu.Item key="setting:2">Option 2</Menu.Item>
      </MenuItemGroup>
      <MenuItemGroup title="Item 2">
        <Menu.Item key="setting:3">Option 3</Menu.Item>
        <Menu.Item key="setting:4">Option 4</Menu.Item>
      </MenuItemGroup>
    </SubMenu>

更新：（ 对于火狐） ：

如果您有 左右 菜单元素，则需要添加

style={{float: 'right'}} 向右 MenuItem 和

style={{float: 'left'}} 到左边。

忽略后者将导致某些浏览器 (Firefox) 渲染底层的 <li> 标签，它们之间有一个中断。

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于 Ant 设计 4.16.3 中的一些更改， style={{float: 'right'}} 将不再起作用。

相反，您可以使用 style={{ marginLeft: 'auto' }} 。

来源： Github问题

原文由 Frazze 发布，翻译遵循 CC BY-SA 4.0 许可协议