HTML元素的子元素在换行时具有不同的背景答案

【问题标题】：children of HTML element different background on line-breakHTML元素的子元素在换行时具有不同的背景
【发布时间】：2020-05-27 16:40:32
【问题描述】：

如果两者之间有一个换行符，为什么不是所有子级的背景颜色都与父级的一个 HTML CSS 相同，例如，如果我的字体大小为 20：

&lt;div style="background-color: rgba(0,0,0,0.5);font-size: 20px;"&gt;&lt;span style="text-align:left; color: blue;"&gt;Roberto#3&lt;span style="float:right;"&gt;18:21&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

效果很好，但如果我的字体大小是 130

&lt;div style="background-color: rgba(0,0,0,0.5);font-size: 130px;"&gt;&lt;span style="text-align:left; color: blue;"&gt;Roberto#3&lt;span style="float:right;"&gt;18:21&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;

以及如何简单地解决这个问题？

【问题讨论】：

标签： html css background line-breaks

【解决方案1】：

内容宽度大于包含它的元素，并且它是浮动的，它将“溢出”到其容器之外。然后我们可以添加溢出：auto;到包含元素来解决这个问题：

<div style="background-color: rgba(0,0,0,0.5);font-size: 130px; overflow: auto;"> 
  <span style="text-align:left; color: blue;">Roberto#3<span 
  style="float:right;">18:21</span></span></div>

【讨论】：