Question

我正在尝试在表格单元格中创建一个简单的蓝色按钮，用于左右空格的电子邮件。我正在做的事似乎没有用（你可以看到那里有一些膨胀），我有一个正确宽度的蓝色矩形，但它不会增加顶部和底部的空间。

它在Gmail中看起来不错，但我特别关注Outlook 2010的问题。还有其他方法可以做到这一点吗？

我希望文本居中（v + h）在蓝色矩形内，顶部和底部有填充。

在outlook 2010中看到的2个单元格中并排连接2个按钮的图像

<tr>
<td>
    <center>
            <div height="25px" style="background-color:#1d70b7; padding:5px; width:60%; margin-bottom:20px; margin-right:20px; margin-left:20px; max-width:250px; line-height:25px; height:25px;" width="250px">
                <p style="line-height:25px;"><font color="#FFFFFF">DNB</font></p>
                </div>
        </center>
    </td>
    <td>
        <center>
            <div height="25px" style="background-color:#1d70b7; padding:5px; width:60%; margin-bottom:20px; margin-right:20px; margin-left:20px; max-width:250px; line-height:25px; height:25px;" width="250px">
                <p style="line-height:25px;"><font color="#FFFFFF">FNB</font></p>
            </div>
        </center>
</td>

提前致谢

Answer 1

Campaign Monitor制作了他们所称的＆＃34;防弹按钮制造商＆＃34;

就在这里：buttons.cm

现在我经常打电话来添加一些填充，但不要在实际的文本或按钮周围进行，在包装div中执行：

<div style="padding-top: 15px; padding-bottom: 15px;>
    <some button code>
</div>

我们使用padding-top和padding-bottom的原因是因为有些客户不喜欢CSS简写（比抱歉更安全）。我希望这会有所帮助。

Answer 2

I answered a similar question here。简而言之，像这样的按钮需要的代码比在具有良好的盒子模型支持的网络/电子邮件客户端上需要的代码更多。可以在按钮的父padding标记中使用margin（不是<td>）来应用额外的间距。

<td align="center" style="padding: 15px 25px;">

    <!-- Button 1 : Begin -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
        <tr>
            <td style="border-radius: 4px; background: #1d70b7; text-align: center;">
                <a href="http://www.google.com" style="background: #1d70b7; border: 5px; solid #1d70b7; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;">
                    DNB
                </a>
            </td>
        </tr>
    </table>
    <!-- Button 1 : END -->
</td>

<td align="center" style="padding: 15px 25px;">
    <!-- Button 2 : Begin -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto; display: inline-block;">
        <tr>
            <td style="border-radius: 4px; background: #1d70b7; text-align: center;">
                <a href="http://www.google.com" style="background: #1d70b7; border: 5px; solid #1d70b7; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;">
                    FNB
                </a>
            </td>
        </tr>
    </table>
    <!-- Button 2 : END -->

</td>

这是少数类似技术之一outlined on Litmus。

Answer 3

我也有类似的问题让我的按钮工作。一个简单的技巧是使用border，因为所有主要邮件客户端都支持border。只需添加＆＃34; border XXpx solid＃color＆＃34;用a-tag伪造你的填充物。如果你不使用超过10px的边界，它的效果非常好。

Outlook 2010 - 由表格单元格中填充的div组成的按钮？

3 个答案: