将 <a> 放在边界上？邮件通讯
Place <a> over the border ? Mail Newsletter
我想像图片一样将 <a> 标记放在边框上，但它必须在 outlook 2013 中响应。
Outlook 不支持 Max-Height，仅在 table 元素（td、th、tr）中填充，任何问题 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>
更新
好吧，我没看到图片，因为我是个白痴。
这就是我所做的
我做了 a position:relative
然后将以下内容添加到内联样式中：
border: white solid 10px;
bottom: -37px;
因为您使用的是 outlook，所以我正在做一些我不建议您在现实世界中使用的事情 css。有更好的做事方式。
然后我将以下内容添加到您的table：
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>
老遮阳棚
老实说，我不是 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 标签中。
如果这不是您想要的，请发表评论并进行错误调整
这是您正在寻找的工作示例：
<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> 标记放在边框上，但它必须在 outlook 2013 中响应。
Outlook 不支持 Max-Height，仅在 table 元素（td、th、tr）中填充，任何问题 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>
更新
好吧，我没看到图片，因为我是个白痴。
这就是我所做的
我做了 a position:relative
然后将以下内容添加到内联样式中：
border: white solid 10px;
bottom: -37px;
因为您使用的是 outlook，所以我正在做一些我不建议您在现实世界中使用的事情 css。有更好的做事方式。
然后我将以下内容添加到您的table：
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>
老遮阳棚
老实说，我不是 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 标签中。
如果这不是您想要的，请发表评论并进行错误调整
这是您正在寻找的工作示例：
<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>