我如何在不使用表格格式化的情况下呈现获取的数据？

Question

所以我试图对齐获取的JSON数据。

我需要使数据与每个属性标题对齐，而不使用下图所示的表。

有了桌子，我可以做到，但是没有桌子，我似乎找不到办法。

我的表格示例：

export default function UserDetails({ data }) {

 const classes = useStyles()

   return (
    <div>
      <h1>User Details</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">Name</TableCell>
            <TableCell align="left">description</TableCell>
            <TableCell align="left">email</TableCell>
            <TableCell align="left">group</TableCell>
            <TableCell align="left">sn</TableCell>
            <TableCell align="left">uid</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            {Object.entries(data).map(([key, value])=> (
              <TableCell align="left" key={key}> {value}</TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>


    </div>
   )
}

Answer 1

我发现我可以将ListItem与@material-ui结合使用以达到相同的结果。这就是我想要的。有了一些CSS，我可以使其水平显示项目。

这里是代码：