React布局求助：如何使<Typography>后<div>内容横向排列而非垂直堆叠

嘿，这问题我之前也踩过坑！核心原因很简单：你用了<div>包裹链接——div是块级元素，默认会独占一行，直接把链接和前面的文本拆成两行啦。

快速修复方案 #

把包裹链接的<div role="article">换成<span role="article">就行，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>

如果role="article"不是必须的，甚至可以直接去掉外层容器，让链接直接放在Typography里：

<Typography color="textSecondary" variant="body1">
  I have read the{" "}
  <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
    Privacy Policy
  </a>
</Typography>

补充小提醒 #

在JSX里，文本和相邻的元素之间最好加个空格（比如{" "}），避免渲染后文本和链接挤在一起哦。

推荐学习资料 #

• 先吃透CSS基础里的块级元素 vs 行内元素，这是布局问题的核心，搞懂了这类换行问题就再也难不倒你了
• 可以多看看MUI官方文档里的Typography组件说明，了解它的容器特性和内部元素的适配规则

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