在 MUI 中对齐文本第二行答案

【问题标题】：Align text second line in MUI在 MUI 中对齐文本第二行
【发布时间】：2021-11-17 11:39:35
【问题描述】：

我在对齐第二行的文本时遇到问题。它需要与第一行对齐。

<Card sx={{ maxWidth: 200 }}>
  <CardMedia
    component="img"
    height="140"
    image="/static/images/cards/contemplative-reptile.jpg"
    alt="green iguana"
  />
  <CardContent>
    <Typography gutterBottom variant="h5" component="div">
      Lizard
    </Typography>
    <Box>
      <Typography variant="body2" color="error">
        &bull; Hello how are you doing there?
      </Typography>
    </Box>
    <Box>
      <Typography variant="body2" color="error">
        &bull; Hi how are you doing there?
      </Typography>
    </Box>
  </CardContent>
  <CardActions>
    <Button size="small">Share</Button>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

【问题讨论】：

可以使用无序列表
@MohitMaroliyaB17CS036。想使用排版。你能分叉我的代码框吗？
@Joseph 您的示例已经左对齐 codesandbox.io/s/mediacard-material-demo-forked-8il0f 实际上您想要什么？
@Khabir。你删除点？它应该在那里，因为它就像一个列表项。 “there”应与“Hello”或“Hi”对齐
@Joseph 我删除点只是为了检查它。有或没有点它已经对齐这就是为什么我问你真正想要什么？

标签： css reactjs material-ui

【解决方案1】：

将子弹放入另一个Typography组件中并水平对齐：

<Stack direction="row" gap={1}>
  <Typography variant="body2" color="error">
    &bull;
  </Typography>
  <Typography variant="body2" color="error">
    Hello how are you doing there?
  </Typography>
</Stack>

之前

之后

现场演示

【讨论】：

你好。我可以寻求帮助吗？ stackoverflow.com/questions/70888167/…

【解决方案2】：

请尝试使用ul html element 并添加一些样式。

...
      <CardContent>
        <ul>
          <li>
            <Typography variant="body2" color="error">
              Hello how are you doing there?
            </Typography>
          </li>
          <li>
            <Typography variant="body2" color="error">
              Hi how are you doing there?
            </Typography>
          </li>
        </ul>
      </CardContent>
      ...

【讨论】：

请分叉我的密码箱