css - テキストと一緒に画像を挿入する

Question

テキストと一緒に画像を挿入しようとしています。divを挿入すると、画像が次の行に配置されます。divには背景画像が設定されています。ここに私のコードがあります:

Chat Rooms <div class="dot"></div>

テキストは中央揃えになります。

Answer 1

私があなたの問題を正しく理解していれば<div>、新しい行に移動します。これは、div タグには、デフォルトで、display: block;簡単に言えば、独自の行に移動し、その周りにあるものを上または下に残すように指示するプロパティがあるためです。

この問題を修正するには、次の CSS をドキュメントに適用します。

.dot {
    display: inline;
}

div のdisplayプロパティを に設定するinline(そして横に幅と高さを与える) と、周囲のコンテンツと同じ行に配置できるようになります。ただし、代わりに<img>タグを使用することをお勧めします。これは、あなたのようなケースでは既に正しい動作を示しています。

<img>タグのリファレンスについては、次のリンクにアクセスしてください:
https://developer.mozilla.org/En/HTML/Element/Img

Answer 2

float右または左のオプションで使用

Chat Rooms <div class="dot" style="float: right;"></div>

Answer 3

ブラウザーは常に、要素の前後に改行を配置します。

http://www.w3schools.com/tags/tag_div.asp

したがって、目的の結果を得るには float 属性を使用する必要があります。

<div class="dot" style="float: left"></div>

または、次のこともできます。

<p>Chat Rooms <img src="link to your image" alt="altext" /> </p>

Answer 4

あなたはこのようにすることができます-

<div><span style="float:left;">chat room</span> <span class="dot"></span>
<div style="clear:both;"></div></div>