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

时间:2017-02-16 16:24:06

标签: html-email outlook-2010

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

它在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>

提前致谢

3 个答案:

答案 0 :(得分:0)

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

就在这里:buttons.cm

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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