html - HTML元素的子元素在换行时具有不同的背景

Question

为什么不是所有孩子的背景颜色都与父母的一个 HTML CSS 相同，如果有一个换行符将两者分开，例如如果我的字体大小为 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>

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

标签： htmlcssbackgroundline-breaks

Answer 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>