时间戳

首页 > 解决方案 > 使用 material-ui 右对齐菜单选项

javascript - 使用 material-ui 右对齐菜单选项

问题描述

我有一个 material-ui 菜单，其中包含以下内容：

<span>
  <Link to="/issues">
    <Button style={isActive(history, "/issues")}>Issues
    </Button>
  </Link>
  <Link to="/users">
    <Button style={isActive(history, "/users")}>Users
    </Button>
  </Link>
  <Link to="/signup">
    <Button style={isActive(history, "/signup")}>Create User
    </Button>
  </Link>
  <Link to={"/user/" + auth.isAuthenticated().user._id}>
    <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
  </Link>
    <Button color="inherit" onClick={() => {
          auth.signout(() => history.push('/'))
        }}>Sign out</Button>
</span>

它从屏幕左侧以一行显示菜单项。我希望My Profile和Sign Out按钮出现在屏幕右侧。我该怎么做呢？

标签： javascriptreactjsmaterial-ui

解决方案

即使这与 react 或 material-ui 无关，您也可以使用 flex box：

<div style={{ display: 'flex', justifyContent: 'space-between' }}>

  <div>

    <Link to="/issues">
      <Button style={isActive(history, "/issues")}>Issues
      </Button>
    </Link>
    <Link to="/users">
      <Button style={isActive(history, "/users")}>Users
      </Button>
    </Link>
    <Link to="/signup">
      <Button style={isActive(history, "/signup")}>Create User
      </Button>
    </Link>

  </div>

  <div>

    <Link to={"/user/" + auth.isAuthenticated().user._id}>
      <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
    </Link>
    <Button color="inherit" onClick={() => {
      auth.signout(() => history.push('/'))
    }}>Sign out</Button>

  </div>

</div>

推荐阅读