HTML元素的子元素在换行时有不同的背景。

Question

为什么所有子代的背景颜色不能和父代的背景颜色一样，如果有一个换行符隔开的话，比如说我的字体大小是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: 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>