HTML 元素的 children line-break 上的不同背景

Question

为什么 children 的背景颜色与 parent 的背景颜色不同 HTML CSS 如果有换行符分隔二，例如，如果我的 font-size 是 20:

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

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

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

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

Answer 1

内容宽度大于包含它的元素，并且它是浮动的，它将"overflow"超出其容器。然后我们可以添加 overflow: 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>

HTML 元素的 children line-break 上的不同背景

children of HTML element different background on line-break

html

css

background

line-breaks