8

我正在制作电子邮件模板，所以我的能力有限。

我有 align="center" 但我仍然需要两个跨度之间的空间。我怎样才能做到这一点？

代码：

<td width="659" height="28" bgcolor="#999999" align="center">
    <span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
    CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
    font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
     font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
            </td>

注意：我不能在电子邮件模板中使用边距或填充。

4

9 回答 9

15

并非所有电子邮件客户端都支持保证金。过去我在填充方面也有一些轻微的不一致，尽管它确实有效。

可能看起来像一个黑客（但不是用于电子邮件的 html 吗？） - 电子邮件中最安全的方法是&nbsp;像这样一起使用多个：&nbsp;&nbsp;&nbsp;.

我也会使用<font>标签而不是<span>，它们更加一致。

于 2013-05-22T18:01:40.447 回答
4

试试这个 CSS：

span{
    margin-right: 10px;
}

这是演示：http: //jsfiddle.net/84qyG/

于 2013-05-22T17:53:01.040 回答
4

正在填充您要查找的内容？ 

span{
padding-left: 15px;
}
于 2013-05-22T17:52:09.573 回答
1

考虑这样做：

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span>&nbsp;<span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>

注意细微之处 跨度之间。

不知道为什么你不能使用边距。另外，您使用 td 是否有原因？我猜它是桌子的一部分？

于 2013-05-22T17:53:22.153 回答
1

我相信你真正在寻找的是

display: block;

前任。http://jsfiddle.net/kshreve/5jNGu/

您可以这样做的另一种方法是<br/>在关闭跨度之后添加。

编辑：您还应该考虑添加 CSS 类以减少冗余样式的数量

于 2013-05-22T17:57:08.570 回答
1

考虑在 2 个跨度标签之间插入一个空 div 吗？

.spacer {
    display: inline-block;
    width: 10px;
}
于 2013-05-22T17:57:59.577 回答
1

使用多个非换行符或分隔符图像可以解决您的问题。

<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
于 2013-05-29T15:50:48.107 回答
0

您可以使用填充或边距：http: //jsfiddle.net/tpXF4/

<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
 font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
        </td>
于 2013-05-22T17:49:51.377 回答
0

如果您使用的是 jsx/React，则可以使用反引号：

<span>{` My text...`}</span>

只需添加一个空格即可开始您的文本（或结束您的文本）

于 2020-06-10T18:22:06.500 回答