为什么div旁边的span的内容出现在不同的行上

Question

我在html中有这个基本结构，但它的内容显示在两行中，但我希望它们在同一行上并排。在此代码笔中复制

<div>
<span>span</span>
<div>div</div>
</div>

如何使这两个元素并排显示文本？

此外，当复制和粘贴文本时，它应该与内联结构匹配

Answer 1

您可以使用两个跨度，或者如果您需要为第二个元素使用div，您可以使用style="display: inline-block"

<div>
<span>span</span>
<span>div</span>
</div>
<div>
<span>span</span>
<div style="display: inline-block">div with inline block</div>
</div>

Answer 2

<div>是一个块元素，默认情况下总是显示在自己的行上。更改

<div style='display:inline'></div>
<!-- or -->
<div style='display:inline-block'></div>

或在您的<style>标签中

div {
display:inline-block;
}