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>