Question

I want to put the <a> tag over the border like the image, but it must be responsive in outlook 2013.

Outlook doesn't support Max-Height , paddings only in table elements ( td, th, tr ) , any question https://www.campaignmonitor.com/css/

<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
        border="0">
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
                color: #737373;
                font-size: 15px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 9px;">Example</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
                   xxxx</p>

                <table style="color:white;border-left: 10px solid #ffffff;
                border-right: 10px solid #ffffff;"
                    width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center" valign="top" style="padding:0px 0px 0px 0px;" bgcolor="#ed1c2e">
                            
                            <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">See
                                more <i style="    font-size: 29px;
                                                vertical-align: -5px;
                                                font-style: normal;">➝</i>
                            </a>

                        </td>

                    </tr>
                </table>


            </td>

        </tr>

    </table>

Answer 1

更新

好的，所以我看不到图片，因为我是个白痴。

这就是我所做的我做了a position:relative

然后将以下内容添加到内联样式中：

border: white solid 10px; 
bottom: -37px;

因为您的使用前景，我正在做一些我不建议您在现实世界中使用的CSS。有更好的做事方法。

然后我将以下内容添加到您的表中：

margin-top: -30px;

这只是将其向上移动，因此不会在文本和按钮之间造成如此大的差距。

<table style="padding-left:28px;padding-right:27px;position: relative;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
<tbody><tr>
    <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
        <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
        color: #737373;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 9px;">Example</p>
        <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px;padding: 20px;">Example
           xxxx</p>

        <table style="
        color:white;
        padding-bottom: 0px;
        " width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody><tr>
                <td align="center" valign="" style="padding:0px 0px 0px 0px;padding: -20px;position: relative;width: 100%;top: bottom;bottom: 20px;text-align: center;">
                    
                    <a href="#" target="_blank" style="text-decoration:none;color:#ffffff;outline:none;width:90%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700;text-align: center;background: #ed1c2e;display: block;position: absolute;border: white solid 10px;top: 0px;z-index: 200;left: 50%;transform: translateX(-50%);">See
                        more <i style="    font-size: 29px;
                                        vertical-align: -5px;
                                        font-style: normal;">➝</i>
                    </a>

                </td>

            </tr>
        </tbody></table>


    </td>

</tr>

</tbody></table>

OLD AWNSER

说实话，我不是100％地确定您想要什么。我猜是这个吗？您将max-height用于什么？

这是您想要的吗？

<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left"
        border="0">
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;    padding: 20px 20px 0px 20px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
                color: #737373;
                font-size: 15px;
                font-weight: 700;
                text-transform: uppercase;
                margin-bottom: 9px;">Example</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Example
                   xxxx</p>

                <table style="color:white;border-left: 10px solid #ffffff;
                border-right: 10px solid #ffffff;"
                    width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td align="center" valign="top" style="padding:0px 0px 0px 0px;">
                            
                            <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center; background: #ed1c2e; display: block">See
                                more <i style="    font-size: 29px;
                                                vertical-align: -5px;
                                                font-style: normal;">➝</i>
                            </a>

                        </td>

                    </tr>
                </table>


            </td>

        </tr>

    </table>

您所缺少的只是display: block;标签中的a。

如果这不是您想要的，请发表评论，并进行不适的调整

Answer 2

这是您正在寻找的工作示例：

<html>
<head>
<style>
    button:focus {
        outline: none;
        cursor: pointer
    }

    body {
        font-family: 'Arial';
    }
</style>
</head>
<body>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td height="50" class="block" style="border:10px solid #efefef;text-align:left;padding: 20px 20px 0px 20px;border-bottom: 0px;">
                <p style="color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:10px;text-align:justify;   margin: 0;
            color: #737373;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 9px;">Campanha</p>
                <p style="margin:0;color:#000000;font-size:16px;font-weight:700;line-height:21px;margin-bottom:15px; ">Estratégia
                    nacional de Turismo 2027</p>
            </td>
        </tr>
    </tbody>
</table>
<table style="padding-left:28px;padding-right:27px;" cellpadding="0" cellspacing="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td style="margin: 0px;padding: 0px;width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-right: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-left: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td align="center" valign="top" style="padding: 0px 0px 0px 0px;" bgcolor="#ed1c2e">
                <a style="color:#ffffff;outline:none;cursor:pointer;width:100%;height:40px;border:none;padding-left:0px;padding-right:0px;font-size:16px;font-weight:700; text-align: center;">Ver
                    mais <i style="font-size: 29px; vertical-align: -5px; font-style: normal;">?</i>
                </a>
            </td>
            <td style="margin: 0px; padding: 0px; width: 10px;">
                <table style="color:white;background-color: #efefef;padding: 10px 0px 0px 0px;margin-left: 10px;" width="" align="right" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr>
                            <td bgcolor="#ed1c2e" style="
                                    text-align: center;
                                    padding-right: 20px;
                                    padding-top: 24px;
                                    width: 23px;
                                    background-color: white;
                                    ">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table> 
</body>

放置<a> over the border ? Mail Newsletter

2 个答案: