我正在Mailchimp中设计一个邮件,并希望并排使用两个按钮。因此,我插入了一个代码块并复制了常规按钮元素,然后复制了td标记并将其粘贴到第一个td标记下面。然后我把" margin-left:80px"以第二个按钮的样式在两者之间获得空间(在尝试左右对齐但这不起作用)。
我希望两个按钮之间有一个白色(背景)空间,但按钮之间的空间与按钮本身的颜色相同。
<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-radius: 3px;background-color: #F59B29;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;margin-left: 80px;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>
</td>
</tr>
</tbody>
</table>
&#13;
有人知道为什么边距空间不是背景颜色吗?
答案 0 :(得分:1)
使用此代码..希望此帮助,如果您想要更多自定义,您可以添加自己的.. 试试这个:
<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; width:550px;">
<tbody>
<tr>
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; width:100%">
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="background-color: #F59B29;border-radius:3px;font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;width:45%; padding:8px 10px;display: block; float:left;">More information</a>
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="background-color: #F59B29;border-radius:3px; font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;margin-left:10px;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding:8px 10px;display: block; width:45%; float:left;">More information</a>
</td>
</tr>
</tbody>
</table>
答案 1 :(得分:0)
为此,你应该使用填充而不是边距
答案 2 :(得分:0)
这是最好的方法。你在第一个锚标记之后缺少关闭td。
您可以将空白td i的宽度更改为您想要的任何颜色。
<table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border-radius: 3px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
<tbody>
<tr>
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F59B29;border-radius: 3px;">
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a></td>
<td width="20"></td><!-- to create space -->
<td align="center" valign="middle" class="mcnButtonContent" style="font-family: Arial;font-size: 16px;padding: 15px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;background-color: #F59B29;border-radius: 3px;">
<a class="mcnButton " title="More information" href="https://google.com" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;display: block;">More information</a>
</td>
</tr>
</tbody>
</table>
希望有所帮助。