css - CSS子元素在浮动或对齐时失去父背景颜色

Question

<span class='parent'>Parent<span class='child'> and child</span></span>

如果我这样做：

.parent {
    background-color: green;
}

所有文本都具有绿色背景色。但如果我添加这个：

.child {
   float: right;
}

孩子不再保留该财产。我可以background-color对孩子做，但我需要突出显示两者之间的空间。

有没有办法做到这一点？

jsfiddle：http: //jsfiddle.net/SLWTd/

Answer 1

孩子永远不会自动继承父母的背景颜色。浮动内容就在父级背景之上。在这种情况下，父级的背景仅跨越其实际内部文本的数量（不包括浮动内容）。

幸运的是，通过设置结构的方式，您可以显式设置子元素的背景以继承其父元素的值。

.child {
    float: right;
    background-color: inherit;
}

---

如果您希望整行都是那种颜色，则需要使用块级元素。试试这个：

<div class='parent'><span class='child'> and child</span>Parent</div>