如何在此代码中的 <Typography> 之后放置 <dv>

如何解决如何在此代码中的 <Typography> 之后放置 <dv>

我学习了 React，现在我尝试通过各种方式通过阅读 Stackoverflow question 和 html div doc

如图所示，文字和链接应该在一条直线上，而不是垂直堆叠

有人可以帮我解决这个问题或建议一些我可以做的阅读来学习这个吗

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

解决方法

你试过了吗？

...
 I have read the
            <span role="article">
                <a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
                    Privacy Policy
                </a>
            </span>

但由于 a 是一个 inline 元素，因此它也可以在没有 span 的情况下工作。您可以阅读更多关于 css 中的内联元素和块元素的内容。