如何在导航栏中将Try for Free按钮对齐到Login链接的右侧

• 你当前的外层Grid item默认是纵向排列子元素的块级容器，内部的Tabs和Button组件默认都是块级元素，会自动换行上下排布，无法同行显示
• Tabs组件默认占满父容器100%宽度，即使强制两个元素同行，Login链接也会挤占全部宽度把按钮挤到下一行

方案1：启用你注释掉的Toolbar组件（推荐） #

Toolbar是Material UI专门为导航栏设计的容器，默认开启flex横向布局，自带垂直居中对齐的样式，直接取消注释即可：

<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
  <Toolbar disableGutters>
    <Tabs className={classes.tabContainer}>
      <Tab className={classes.tab} component={Link} to="/analyze" label="Login" />
    </Tabs>
    <Button
      variant="contained"
      color="default"
      size="medium"
      onClick={() => {
        // handleClickImportPGN();
      }}
    >
      Try for Free
    </Button>
  </Toolbar>
</Grid>

如果需要让两个元素整体靠右对齐，保留外层Grid的justifyContent: flex-end样式即可。

方案2：不用Toolbar，直接给外层加flex样式 #

如果你不想用Toolbar，直接给外层Grid item配置flex布局属性即可：

1. 给外层Grid加display: flex、alignItems: center实现横向排列、垂直居中
2. 给Tabs加flexShrink: 0避免它自动撑满宽度挤压按钮

<Grid item xs={4} sx={{ 
  display: 'flex', 
  alignItems: 'center', 
  justifyContent: 'flex-end' // 整体靠右对齐可加这行
}}>
  <Tabs className={classes.tabContainer} sx={{ flexShrink: 0 }}>
    <Tab className={classes.tab} component={Link} to="/analyze" label="Login" />
  </Tabs>
  <Button
    variant="contained"
    color="default"
    size="medium"
    onClick={() => {
      // handleClickImportPGN();
    }}
  >
    Try for Free
  </Button>
</Grid>

如果你使用的是旧版Material UI的makeStyles方案写样式，把上述sx内的属性写到对应的自定义class中即可，效果完全一致。

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