web-dev-qa-db-ja.com

Ant Designでメニュー項目を右揃えするにはどうすればよいですか？

開いている Gitの問題 メニュー項目の配置の小道具を要求しています。それまでの間、いくつかのNavbarアイテム（ログイン、ログアウトなど）を右側に移動する正しい方法は何ですか？

すべてのメニュー項目が左側にあるメニューのサンプルコードがあります。

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);
reactjsantd
8
rampatowl

必要なメニュー項目を右側に指定してくださいfloat: right JSXスタイリングまたはCSSクラス経由。

JSXインラインスタイルを使用してナビゲーション3アイテムを右に引っ張る例、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>

更新：（Firefoxの場合）：

右and左メニュー要素がある場合は、追加する必要があります
style={{float: 'right'}}の右側MenuItemの
style={{float: 'left'}}左側にあります。

後者を省略すると、一部のブラウザ（Firefox）が基になる<li>間に区切りがあるタグ。

11
Paul