0

我想把我的电子邮件作为图像，所以我把文本和电子邮件地址作为图像。在该行之后是另一行，这是同一行上的文本和链接。

但问题是，出于某种原因，第二行（带有文本和链接）正在使用第一行的参数进行格式化，即使它不在同一个 div 标签上。我完全不明白为什么要对其进行格式化（当我删除第一行并对其进行所有格式化时， www:link 会按应有的方式出现在一行上）。我只能通过使用绕过它：

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

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

为了更清楚，这里是一个屏幕截图，它现在的样子： 我的两条 html 行的当前状态

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
4

3 回答 3

2

你可以试试这个：

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
}

演示

于 2012-08-07T12:18:02.097 回答
0

您的宽度是问题，请尝试设置更大的值。让我们知道它是如何工作的。

于 2012-08-07T11:45:31.370 回答
0

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

于 2012-08-07T11:40:04.427 回答