このリンクの漏洩を制御するにはどうすればよいですか？

Question

私はアクティベーションメールを送信しています。ユーザーはボタンをクリックしてアカウントを有効にする必要がありますが、リンクの境界はボタンを超えています。メインの要素の中にa tagsを挿入しないでこの問題を解決するにはどうすればよいですか？次に、テキストはクリック可能ですが、親divは表示されません。 anchorの内側とmain div heightを高めているの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> 
 
       \t 
 
<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> 
 
       \t 
 
     <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>

Answer 2

設定position:absolute。

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