Javascript 使用Material UI和React.js创建包含左右对齐元素的工具栏

我正在尝试更新我正在创建的网站上的工具栏，我正在努力创建一个工具栏，将东西放在我想要的地方。我希望站点的名称和徽标位于工具栏的左侧，而登录/注册按钮固定在右侧。到目前为止，我已经成功地获得了我想要的徽标和标题，但每次我尝试添加对齐到右边距的按钮时，它们只是放在标题/徽标末尾的旁边。这是我的密码：

function Header() {

  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static">
        <Toolbar>
          <MenuItem edge="start">
            <Link to="/" style={{textDecoration:"none", color:"black"}}>
              <Typography variant="h3">
                <strong>Test</strong>Value
                <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
              </Typography>
            </Link>
          </MenuItem>
          <MenuItem>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
            </Link>
            <Link to={"/"} style={{ textDecoration: 'none' }}>
              <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
            </Link>
          </MenuItem>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  );
}

我尝试过使用flexGrow，正如material ui文档中的示例所示，我考虑过使用网格元素，但实际上我不想担心标题和按钮之间的间距，我只是希望能够对元素的左右边距进行对齐，这样它们的位置是一致的，无论它们在屏幕上的大小如何，它们相对于每个边距都保持相同的位置

任何帮助都将不胜感激

function Header() {

    return (
      <ThemeProvider theme={theme}>
        <AppBar position="static">
          <Toolbar style={{display:"flex", justifyContent:"space-between"}}>
              <div>
            <MenuItem edge="start">
              <Link to="/" style={{textDecoration:"none", color:"black"}}>
                <Typography variant="h3">
                  <strong>Test</strong>Value
                  <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
                </Typography>
              </Link>
            </MenuItem>
            </div>
            <div>
            <MenuItem>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
              </Link>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
              </Link>
            </MenuItem>
            </div>
          </Toolbar>
        </AppBar>
      </ThemeProvider>
    );
  }

因为我假设您希望右侧的按钮是水平的，所以如果您在右侧组中没有块元素，请将其添加到右侧div not needed；默认情况下，链接是内联的： 另外，确保工具栏跨越其整个预期宽度，但我认为这是MaterialUI工具栏的默认行为

回应评论 如果希望右侧组中的按钮具有一定的间距，则应用填充是最简单的解决方案。您可以对每个元素单独应用填充，我不知道是否只有按钮可以进行细粒度控制

或者，如果希望在右侧的所有图元之间创建相等的空间：

.右分区>*+*{ 左侧填充：20px； padding top:20px；//如果要垂直堆叠按钮，请使用此按钮 } 上面的代码获取右侧组中除第一个之外的每个元素，并对其应用左侧填充，因此创建的唯一间距是元素之间的间距。当然，您以后仍然可以覆盖特定元素的填充

请记住，您必须以某种方式应用这些样式，在那里，我假设您将向正确的div添加一个正确的div类

如果您使用的是MUI的样式解决方案，而不是纯css，它将看起来像：

makeStyles({
    rightDiv:{
        "& > * + *":{
            paddingLeft:"20px"
        }
    }
})

使用样式化组件：

因为我假设您希望右侧的按钮是水平的，所以如果您在右侧组中没有块元素，请将其添加到右侧div not needed；默认情况下，链接是内联的： 另外，确保工具栏跨越其整个预期宽度，但我认为这是MaterialUI工具栏的默认行为

回应评论 如果希望右侧组中的按钮具有一定的间距，则应用填充是最简单的解决方案。您可以对每个元素单独应用填充，我不知道是否只有按钮可以进行细粒度控制

或者，如果希望在右侧的所有图元之间创建相等的空间：

.右分区>*+*{ 左侧填充：20px； padding top:20px；//如果要垂直堆叠按钮，请使用此按钮 } 上面的代码获取右侧组中除第一个之外的每个元素，并对其应用左侧填充，因此创建的唯一间距是元素之间的间距。当然，您以后仍然可以覆盖特定元素的填充

请记住，您必须以某种方式应用这些样式，在那里，我假设您将向正确的div添加一个正确的div类

如果您使用的是MUI的样式解决方案，而不是纯css，它将看起来像：

makeStyles({
    rightDiv:{
        "& > * + *":{
            paddingLeft:"20px"
        }
    }
})

使用样式化组件：

---

这太完美了，谢谢！我唯一的问题是按钮是边对边的。有没有办法调整按钮或其他工具栏元素之间的间距？@bpryan还有一个更新。我没有注意到，如果你想让右边的按钮水平堆叠，你需要将display:flex应用到右边的container div，虽然链接是内联元素，所以如果你只有它们，就不需要flex了。这太完美了，谢谢！我唯一的问题是按钮是边对边的。有没有办法调整按钮或其他工具栏元素之间的间距？@bpryan还有一个更新。我忽略了这一点，如果您希望右侧的按钮水平堆叠，则需要将display:flex应用于右侧的容器div，尽管链接是内联元素，因此，如果您只有它们，则不需要flex。

const RightDiv = styled.div`
& > * + * {
   paddingLeft:"20px"
}
`