css - CSS子要素が親の背景を失う-フロートまたは整列時に色

Question

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

私がこれを行う場合：

.parent {
    background-color: green;
}

すべてのテキストの背景色は緑色です。しかし、これを追加すると：

.child {
   float: right;
}

子はこのプロパティを保持しなくなります。私はbackground-color子供に対して行うことができましたが、2つの間のスペースを強調表示する必要があります。

これを行う方法はありますか？

score 6 · Accepted Answer

子が親の背景色を自動的に継承することはありません。フローティングコンテンツは、親の背景のすぐ上にあります。この場合、親の背景は、実際の内部テキスト (フローティングコンテンツを除く) の量だけに及びます。

幸いなことに、構造の設定方法により、子の背景を明示的に設定して、親の値を継承することができます。

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

線全体をその色にしたい場合は、ブロックレベルの要素を使用する必要があります。これを試して：

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

1 に答える 1