css - 如何控制此链接的泄漏？

Question

我正在发送激活电子邮件。用户必须单击按钮才能激活他们的帐户，但链接边界超出了按钮。如何在不在主元素中插入 a 标签 的情况下解决此问题？然后，文本将是可点击的，但不是父 div。

<table width='100%' border='0' cellspacing='0' cellpadding='0'>
    <tr>
        <td align='center'>
            <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
              <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
                <br> <br> <br>
              	
<a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
        </td>
    </tr>
</table>

Answer 1

使用display:inline-block ...

<table width='100%' border='0' cellspacing='0' cellpadding='0'>
    <tr>
        <td align='center'>
            <div style='border: 1px solid #CCC;width:538px;font-family:Helvetica; padding: 30px'>
              <span style='font-size: 30px;text-align: center;color: #606060;font-weight: bold;'> Just one more step... </span>
                <br> <br> <br>
              	
         <a href='#' style='text-decoration: none'> <div style='color: white; padding: 20px 50px 20px 50px; background: #69B8D6; border: 1px solid #69B8D6;text-align: center;display:inline-block;width: 156px;font-size: 18px;font-weight: bold;border-radius:3px;'> Activate Account </div> </a> </div>
        </td>
    </tr>
</table>