0

css:beforeとに問題があり:afterます。これは私のhtmlです：

<div id = "test-box">
    1
</div>

そしてこれは私のCSSです：

#test-box:before{
    content: "hello";
}

私が実行すると、これは完全に機能し、次のように出力されます。hello 1

しかしdiv、既存のものの中に別のものを入れるdivと、それは機能しません。これは新しいhtmlです：

<div id = "test-box">
    <div>1</div>
</div>

この場合、ブラウザは次のように出力します。

hello
1

1の左側にこんにちは滞在が必要です。

4

3 に答える 3

2

div はブロック要素であるため、div とネストされた div の前に hello を追加すると、明らかに改行が発生します。

ネストされた div を使用する場合は、使用する必要があります

jsfiddle デモ

#test-box div:before{
content: "hello";
}

更新: jsfiddle デモ

#test-box:before{
content: "hello";
}

#test-box div {
    display: inline;
}
于 2013-02-07T14:11:27.047 に答える
1

理由helloは is とは別の行にあります。これは、がブロック レベルの要素 (内側の div) でラップされて1いるためです。1

これを試して： 

#test-box div:before {
  content: "hello";
}

または、HTML を制御できる場合は、内側の div をスパン (または他のインライン要素) に置き換えます。

于 2013-02-07T14:11:09.407 に答える
1

ネストされた div がある場合は、次の CSS を使用します。

#test-box div:before{
    content: "hello";
}

そこのセレクターは id の要素を選択div しtest-box、外側の div の前にテキストを追加する代わりに、その前にテキストを追加します。

1改行した理由はdivsブロック要素だからです。元の CSS は内部<div>タグの前にテキストを追加したため、追加されたテキストの後に改行が追加されました。

それで、これは起こりました：

<div id="test-box">
    hello
    <div> <!-- the div starting here causes the following text to be displayed on a new line -->
        1
    </div>
</div>

変更された CSS を使用すると、代わりに次のようになります。

<div id="test-box">
    <div>
        hello1
    </div>
</div>

外側の div に配置する必要がある場合は、これを css に追加します。

#test-box div{
    display: inline-block;
}

（質問の他の行も保持してください）。

これにより、内側divが新しい行に折り返されるのを防ぎます。

例

于 2013-02-07T14:09:35.543 に答える