如何控制此链接的泄漏？ [英] How do I control the leaking of this link?

问题描述

我正在发送激活电子邮件。用户必须单击按钮才能激活其帐户，但链接边界延伸到按钮之外。如何解决这个问题，而不在主元素中插入 a标签？然后，文本将是可点击的，但不是父div。

I'm sending an activation email. The user must click a button to activate their account, but the link boundaries are extending beyond the button. How do I fix this problem without inserting the a tags inside the main element? Then, the text would be clickable, but not the parent 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>

推荐答案

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

这篇关于如何控制此链接的泄漏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！