链接填充 HTML 电子邮件答案

【问题标题】：Link padding HTML email链接填充 HTML 电子邮件
【发布时间】：2012-11-28 19:10:58
【问题描述】：

我有带有这个标记的表格：

<tr id="main_nav">
    <td style="width: 100%" colspan="2">
        <a>Link1</a>
        <a>Link2</a>
        <a>Link3</a>                            
    </td>
</tr>

我需要为这些链接设置填充，但我无法让它工作...... CSS：

#main_nav a {
    color: #fff;
    font-weight: bold;  
    padding-left: 1em;
}

我尝试过的：将链接包装到 p 标签、span 标签、添加 css 显示块、显示表格、添加带有填充的样式到链接。不能用<td>标签包裹每个链接！

编辑：尝试使用边距而不是填充，没有运气。

【问题讨论】：

我想说看看The Campaign Monitor Ultimate CSS Support Guide，因为它准确地概述了电子邮件客户端支持的 CSS。
是的，这不是您想要重新发明的轮子。试试这个：litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

标签： html css html-table html-email

【解决方案1】：

我通过将大边框设置为与背景相同的颜色成功地解决了这个问题。

border: 10px solid #fff;

【讨论】：

这真是天才！
@Seega 谢谢你，你很友善。

【解决方案2】：

将<a>Link1</a> 放在一个 div 中，然后设置 div 填充。

如果还是不行，尝试改变 div 的宽度，像这里：http://jsfiddle.net/XWLv6/1/

【讨论】：

@Morpheus 你能添加一个 jsfiddle 例子吗？
当我在浏览器中测试时它正在工作。它不在 Outlook 中。
我希望这些链接与表格一起扩展，但是您的示例让我想到了使用百分比宽度并且它有效:) 谢谢 :)

【解决方案3】：

在电子邮件中持续“填充”某些内容的最快方法是在其中添加几个&nbsp;。我知道这似乎是不好的做法......

否则将它们放入自己的表中，并使用空列作为填充以获得一致的结果。

【讨论】：

【解决方案4】：

将display:block; 添加到#main_nav a

【讨论】：

【解决方案5】：

您必须将 CSS 内联用于 HTML 电子邮件中的所有元素。示例：

<a style="color:#fff;font-weight:bold;padding-left:1em;">Link1</a>

【讨论】：

【解决方案6】：

如果只是外观问题，这就是我所做的。

border-right-width: 177px;
border-left-width: 177px;
border-top-width: 10px;
border-bottom-width: 10px;

【讨论】：