Question

我正在Mailchimp中设计一个邮件，并希望并排使用两个按钮。因此，我插入了一个代码块并复制了常规按钮元素，然后复制了td标记并将其粘贴到第一个td标记下面。然后我把＆＃34; margin-left：80px＆＃34;以第二个按钮的样式在两者之间获得空间（在尝试左右对齐但这不起作用）。

我希望两个按钮之间有一个白色（背景）空间，但按钮之间的空间与按钮本身的颜色相同。

＆＃13;

<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;

有人知道为什么边距空间不是背景颜色吗？

Answer 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>

Answer 2

为此，你应该使用填充而不是边距

Answer 3

这是最好的方法。你在第一个锚标记之后缺少关闭td。

我从表格中删除了背景颜色并将其添加到td的
从锚标记
将边框半径移动到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>

希望有所帮助。

保证金空间与元素内容背景颜色相同

3 个答案: