在同一行上对齐文本和图像后出现奇怪的html格式

Question

我想将我的电子邮件作为图片，因此我将文字和电子邮件地址作为图片。在该行之后转到另一行，即同一行上的文本和链接。

但问题是由于某种原因，第二行（带有文本和链接）正在使用第一行的参数进行格式化，即使它不在同一个div标记上。我不明白它为什么会被格式化（当我删除第一行并为它进行所有格式化时，然后www：link就在它的一行上）。我只能通过使用：

来绕过它

<br /> // or another spacings such as padding-bottom.

但我希望线之间的间距最小。

为了更清楚，这里是截图，现在看起来如何：

html代码：

<div class="col3">
Email:
<img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/>
</div>
<div>
 www: <a href="http://www.test.com/">http://www.test.com</a>
 </div>

css样式：

 .col3 { 
width:140px; 
height:15px;
padding-bottom:10px;
 }

 .image-align {
float:right; 

  }

此外我正在使用wordpress，但我有原始的html插件并尝试了原始标签并且还禁用了所有的wordpress格式化，但它是同样的事情。 有谁知道什么可能是错的？

我想做的是第二行应该是这样的：

www: http://www.test.com

不喜欢这样：

wwww:
http://www.test.com

Answer 1

你可以试试这个：

的 HTML 的

<div class="col3">
  <div class="email">Email:</div>
  <img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div>
<div class="sitelink">www: </div>
<div class="link"><a href="http://www.test.com/">http://www.test.com</a> </div>

的 CSS 的

.col3 {
    padding-bottom:10px;
}
.email {
    float:left
}
.image-align {
    display:inline-block;
    margin-left:5px
}
.sitelink {
    float:left
}
.link {
    display:inline-block;
    margin-left:5px
}

<强> DEMO

Answer 2

将类.col3分配给div，我想您可能已经为样式表中的所有div指定了宽度，并且需要覆盖它（使其与上面的div一样宽）

Answer 3

你的宽度是问题，试着改变更大的价值。让我们知道它是如何工作的。