为什么会发生

默认情况下，<span>标记启用了display: inline属性。它说浏览器嵌入文本内容和子标签显示：inlineto text。例如：

.styled {
  border: 5px dashed deeppink;
  background: #00cccc;
}

<p>Lorem <span class="styled">ips<b>um</b></span> dolor sit amet...</p>
<!-- <b> has display: inline by default -->
<p>Lorem <span class="styled">ips<div style="font-weight: bold; ">um</div></span> dolor sit amet...</p>
<!-- <div> has display: block by default, so it has not been styled -->

解决方案

您可以将此标记替换为<div>或将display: block;属性设置为它，因此您的代码将如下所示：

<span style="background-color: rgba(0, 0, 255, 0.2);
             outline: 1px solid red;
             display: block;">
  works1
  <div style="display: block;">I want this too</div>
  works2
</span>

方案二

正如在一个问题的评论中所说的，不欢迎将<div>放入<span>中，所以你可以试试这个：

<div style="background-color: rgba(0, 0, 255, 0.2);
             outline: 1px solid red;">
  works1
  <div>I want this too</div>
  works2
</div>

请记住，默认情况下已启用display: block;，因此您不需要启用它（在解决方案2中已修复）。

它完全按照您想要的方式工作：

<span style="background-color:rgba(0, 0, 255, 0.2);outline:1px solid red; display: block;">
  works1
  <div style="display:block">I want this too</div>
  works2
</span>

虽然简单地改变你的跨度的显示属性将做的伎俩，但我认为这是你不应该做的事情。span可以在div内部，但div不应该在span内部。