1

<div>ドラッグ アンド ドロップ機能を実装するために、後で JavaScript で取得する「ドロップ ゾーン」という IDを含む Web ページの一部 (Bootstrap CSS を組み込む) があります。

<div id="drop_zone">
    <p style="color: darkgray">Drop</p>
    <p style="color: black">test.txt</p>
    <p style="color: darkgray"> here</p>
</div>

<p>この 1 行でスタイリングを変更したいので、そこに s がありますが、上記のコードを使用する場合、または s を s に交換する場合、<p>コード<div>は次のように複数の行でレンダリングされます。

落とす

test.txt

ここ

私が本当にそれを次のようにしたいとき：

ここにtest.txtをドロップします

これは簡単な修正だと思いますが、ここで何か考えはありますか？

4

5 に答える 5

7

<span>の代わりに使用し<p>ます。

于 2013-03-12T23:29:47.907 に答える
4

<p>と<div>は両方ともブロック要素であり、デフォルトでコンテンツを別の行に表示します。<span>その内容をインラインで表示するを使用する方がよいでしょう。

<div id="drop_zone"><span style="color: darkgray">Drop</span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>

styleページがより複雑になるにつれてスタイルを簡単に変更できるようになるため、すべてのスタイルを属性で定義する代わりに、すべてのスタイルをスタイルシートに移動することも検討する必要があります。

于 2013-03-12T23:32:51.413 に答える
2

<span>代わりに使用できると思います<p>

<div id="drop_zone"><span style="color: darkgray">Drop </span><span style="color: black">test.txt</span><span style="color: darkgray"> here</span></div>
于 2013-03-12T23:31:00.403 に答える
2

div または p タグで以下を試すか、このプロパティを持つクラスを作成してください。

display : inline;

また

display : inline-block;

<div id="drop_zone" style='display:inline;'><p style="color: darkgray; display:inline;"> Drop </p><p style="color: black; display:inline;"> test.txt </p><p style="color: darkgray;  display:inline;'"> here</p></div>

これはjsdfiddleです

于 2013-03-12T23:29:46.643 に答える
2

これは<p>ブロックレベルの要素であるため、デフォルトでは改行が発生します..インライン要素（<span>）に置き換えるか、<p>表示をインラインまたはインラインブロックに設定できます

于 2013-03-12T23:30:34.590 に答える