将项目对齐到表格中

Question

我想实现一个基本表，其中列出项目作为键值：

import React, {FormEvent} from 'react';
import {Box, Button, Container, Grid, TextField, Typography} from '@material-ui/core';

export default function Hello( ) {
 
  return (
      <Container>
                      <Grid container
                            direction="column"
                            justifyContent="space-between"
                            alignItems="flex-start">

                          <Grid item>
                              <Box pl={2} pb={3}>
                                  <Typography variant="h4">
                                      Summary
                                  </Typography>
                              </Box>
                          </Grid>
                      </Grid>

                     

                      <Grid item>
                          <Grid
                              container
                              direction="row"
                              justifyContent="flex-start"
                              alignItems="flex-start"
                          >
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      Country 123
                                  </Box>

                              </Grid>
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      USA
                                  </Box>
                              </Grid>
                          </Grid>
                      </Grid>
 

                      <Grid item>
                          <Grid
                              container
                              direction="row"
                              justifyContent="flex-start"
                              alignItems="flex-start"
                          >
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      Country 4323
                                  </Box>

                              </Grid>
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      USA
                                  </Box>
                              </Grid>
                          </Grid>
                      </Grid>

                     

                      <Grid item>
                          <Grid
                              container
                              direction="row"
                              justifyContent="flex-start"
                              alignItems="flex-start"
                          >
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      Country
                                  </Box>

                              </Grid>
                              <Grid item>
                                  <Box component="div"
                                       sx={{display: 'inline', p: 2, m: 2}}
                                  >
                                      USA
                                  </Box>
                              </Grid>
                          </Grid>
                      </Grid>
 
         
      </Container>
  )
}

沙盒：https://stackblitz.com/edit/react-ts-srtlsp?file=Hello.tsx

我有不同大小的值，它们会推动其他值。是否可以在不推送其他值的情况下拥有不同大小的字符串？

有没有更好的方法来实现这个功能？

Answer 1

首先我建议您为此使用表格而不是网格。但是，如果您想完成这项工作，请为您的框指定固定宽度，如下所示：

     <Box
              component="div"
              sx={{ display: 'inline-', p: 2, m: 2, width: 100 }}
            >
              Country 4323
    </Box>

现在它们将是 inline ，因为设置了宽度。请注意，宽度应始终大于您放入框中的内容。