Question

我正在发送一封激活邮件。用户必须单击按钮才能激活其帐户，但链接边界将超出按钮。如何在不在主元素中插入a tags的情况下解决此问题？然后，文本将是可点击的，但不是父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 ...

＆＃13;

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

＆＃13;

Answer 2

设置position:absolute内的div anchor并增加main div height。

<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;height:160px;position:relative;'>
              <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;position:absolute;left:170px;'> Activate Account </div></a>  
</div>

</td>
    </tr>
</table>

设置锚标记内部div的display:inline-block也可以。

<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;display:inline-block;'> Activate Account </div></a>

如何控制此链接的泄漏？

2 个答案: