如何居中对齐两个相对于父级具有不同宽度的元素，同时左对齐具有相同的缩进

Question

我正在使用 Material UI，但这可能只是知道如何使用 Flexbox 实现它的问题。如下图所示。我很难让所有 3 条线在不同的宽度上以相同的方式对齐。

到目前为止我有：

<Grid container justify="center">
  <Grid xs={7}>
    <Grid item container direction="column">
      <Grid container justify="flex-start">
        <p>
         Please check the items in the list below and mark them complete.
       </p>
      </Grid>

      <Grid container justify="center">
        Icon
      </Grid>
      <Grid>
        <ul>
         <li>List item</li>
         <li>List item</li>
        </ul>
      </Grid>
    </Grid>
  </Grid>
</Grid>

感谢任何指导，谢谢！

Answer 1

您的某些网格没有指定它们是容器还是项目，或者缺少项目，并且 dom 可以简化一点。也许是这样的？ （内联样式是删除列表左侧的正常间距，使其看起来更像您的图像，但您应该正确设置列表的样式并将其删除）。

<Grid container justify="center">
    <Grid xs={7} item container direction="column">
        <Grid item>
            <p>
                Please check the items in the list below and mark them complete.
            </p>
        </Grid>
        <Grid container item justify="center">
            <Grid item>Icon</Grid>
        </Grid>
        <Grid item>
            <ul style={{paddingLeft: 0, listStyle: 'none'}}>
                <li>List item</li>
                <li>List item</li>
            </ul>
        </Grid>
    </Grid>
</Grid>