How do I control the leaking of this link?

问题

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>

回答1:

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

回答2:

Set position:absolute of div that is inside of anchor and increase 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>

Setting display:inline-block of inner div inside anchor tag too will work.

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

来源：https://stackoverflow.com/questions/38412207/how-do-i-control-the-leaking-of-this-link