React中如何将<div>置于<Typography>后并实现内容横向排列？

嘿，我一眼就瞅出问题所在啦！你代码里用来包裹<a>标签的<div>是块级元素，它默认会占满整一行，直接把链接挤到了下一行，才导致文本和链接垂直堆叠。咱们只需要把块级元素换成行内元素，或者用MUI自带的组件来适配行内布局就能搞定！

解决方案1：替换div为span（最直接） #

span是原生的行内元素，不会强制换行，完美适配需求：

<Box alignItems="center" display="flex" ml={-1}>
  <Checkbox checked={values.policy} name="policy" onChange={handleChange} />
  <Typography color="textSecondary" variant="body1">
    I have read the{' '}
    <span role="article">
      <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
        Privacy Policy
      </a>
    </span>
  </Typography>
</Box>
<Box alignItems="center" display="flex" ml={-1}>
  <Checkbox checked={values.policy} name="Terms" onChange={handleChange} />
  <Typography color="textSecondary" variant="body1">
    I have read the{' '}
    <span role="article">
      <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Terms%20of%20Service.html">
        Terms and Conditions
      </a>
    </span>
  </Typography>
</Box>

解决方案2：用MUI组件适配行内布局（更贴合组件体系） #

如果你想遵循MUI的组件规范，可以用Typography设置component="span"，或者用Box组件转换为行内元素：

<Box alignItems="center" display="flex" ml={-1}>
  <Checkbox checked={values.policy} name="policy" onChange={handleChange} />
  <Typography color="textSecondary" variant="body1">
    I have read the{' '}
    <Typography component="span" role="article">
      <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
        Privacy Policy
      </a>
    </Typography>
  </Typography>
</Box>

补充学习方向 #

• 先搞懂CSS块级元素与行内元素的核心区别：这是前端布局的基础，能帮你快速定位类似的换行问题。
• 翻阅MUI的Typography文档：里面关于display、component属性的说明，能让你更灵活地控制文本布局。
• 熟练使用MUI的Box组件：它是通用布局容器，通过component属性可以转换为任意HTML元素，适配各种布局场景。

内容的提问来源于stack exchange，提问作者Kid