在此代码中，如何将<dv>放在<Typography>之后

Question

我学习了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>

Answer 1

你试过这个吗？

...
 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中阅读更多关于内联和块元素的内容。