对齐不同长度的材质 UI 网格项目答案

【问题标题】：Align Material UI Grid Items of different length对齐不同长度的材质 UI 网格项目
【发布时间】：2021-03-15 18:03:06
【问题描述】：

我目前有一个材质 ui 网格系统，如下所示：

<>
      <Typography gutterBottom variant='h6'>
        Add New User{' '}
      </Typography>
      <Grid container spacing={3} alignItems='center' justify='center'>
        <Grid item>
          <Typography variant='body2'>Full name</Typography>
        </Grid>
        <Grid item>
          <TextField
            style={{ width: 400 }}
            fullWidth
            margin='dense'
            id='outlined-basic'
            label='Full name'
            variant='outlined'
          />
        </Grid>
      </Grid>
      <Grid container spacing={3} alignItems='center' justify='center'>
        <Grid item>
          <Typography variant='body2'>Email</Typography>
        </Grid>
        <Grid item>
          <TextField
            style={{ width: 400 }}
            fullWidth
            margin='dense'
            id='outlined-basic'
            label='Email'
            variant='outlined'
          />
        </Grid>
      </Grid>
</>

我注意到，由于电子邮件和全名的长度不同，网格项并没有按照我希望的方式对齐。它们目前如下所示：

我希望网格如下所示：

有没有办法像底部图片一样对齐网格项目而无需添加固定宽度？这似乎是我找到的唯一解决方案，但我觉得我缺少有关网格系统的一些东西。

附件是代码沙箱https://codesandbox.io/s/affectionate-bhabha-ur9nm?file=/src/App.js，用于调试

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

我已经为文本字段添加了xs={9}，为带有style={{ textAlign: 'right' }}的标签添加了xs={3}（不熟悉material-ui，所以不知道是否有更好的方法来应用它）。

这是结果：https://codesandbox.io/s/hungry-euclid-n7y8f

【讨论】：

这似乎正是我想要的。我很好奇是否可以将网格居中
@RobertTerrell 如果您可以将两个标签和两个输入包装在同一个容器中，并且它们的父级是 Grid (flex)，那么您可以将其居中

【解决方案2】：

您只需将xs sm lg 添加到您的Grid 组件即可利用Auto layout。根据文档：

自动布局使项目公平地共享可用空间。

应用此更改后，您的项目将正确对齐。您也可以在sandbox 中查看更正后的版本。

【讨论】：