Mailchimp 代码使两个按钮彼此相邻

Posted 2023-03-24

【中文标题】Mailchimp 代码使两个按钮彼此相邻

【英文标题】：Mailchimp code to make two button next to each other

【发布时间】：2018-06-20 06:49:40

【问题描述】：

我在代码方面不是最擅长的，所以很想得到帮助。在做了一些研究之后，我使用他们的代码选项在 Mailchimp 上创建了两个相邻的按钮。但是，这些按钮似乎已连接，我无法在它们之间留出空间。

很想知道您可能有任何解决方案

这是我的自动取款机：

<table border="0" cellpadding="0" cellspacing="10%" style="background-color:#009688;" >
  <tbody>
    <tr>
      <td align="left" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="mailto:[e-mail]" style="color:#FFFFFF; text-decoration:none;" target="_blank">Ask us how</a></td>
      <td align="right" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="http://corpsolutions.brother.com.au/" style="color:#FFFFFF; text-decoration:none;" target="_blank">Find out more</a></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

非常感谢非常感谢你们是天才！！

不客气@Kate O'keeffe 如果您的问题得到解决，请点击接受未来读者的最佳答案，它还会奖励积分，以促进 *** 的用户拥有更好的调节能力。见***.com/help/someone-answers

【参考方案1】：

您的按钮之间似乎没有空格，因为背景颜色正在应用于表格。将此样式移至单个单元格，或者更好地移至链接本身。

<table border="0" cellpadding="0" cellspacing="10%" >
<tbody>
    <tr>
        <td align="left" valign="middle">
            <a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="mailto:[e-mail]" target="_blank">Ask us how
            </a>
        </td>
        <td align="right" valign="middle">
            <a style="background-color:#009688; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px; text-decoration: none;" href="http://corpsolutions.brother.com.au/" target="_blank">Find out more
            </a>
        </td>
    </tr>
</tbody>
</table>

【参考方案2】：

只需在它们之间添加一列，然后控制宽度。注意我也必须设置 cellspacing="0"

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#009688;" >
<tbody>
<tr>
<td align="left" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="mailto:[e-mail]" style="color:#FFFFFF; text-decoration:none;" target="_blank">Ask us how</a></td>
<td style="background-color:#FFF; text-decoration:none;">&nbsp</td>
<td align="right" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;" valign="middle"><a href="http://corpsolutions.brother.com.au/" style="color:#FFFFFF; text-decoration:none;" target="_blank">Find out more</a></td>
</tr>
</tbody>
</table>