Question

我正在设计电子邮件简报模板。

我创建了左右两个按钮，但它不适合水平。

这是html我的代码。

输出在gmail中正确显示但外观不受支持。

 <tr>
   <td width="540" valign="top">

        <table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
               <td align="center" valign="top" style=" ">
                <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">   
                <tbody>
                  <tr>
                           <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
   <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"> 
       <font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td> 
         </tr>
      </tbody>
   </table>  

    <table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
       <tbody>
          <tr>
           <td align="center" valign="top" style=" ">
             <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">   
               <tbody>
               <tr>
                     <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;   font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
                      </td>
                    </tr>
                 </tbody>
                </table>
               </td> 
           </tr>
       </tbody>
    </table>    

  </td>
</tr>

我希望双方都一致，需要支持outlook邮件

enter image description here

Answer 1

将您的代码包裹在table中，并将包含这些按钮的两个table放在两个单独的td中。

以下是代码示例和fiddle

<table> 
<tr>
   <td width="540" valign="top">
        <table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
               <td align="center" valign="top" style=" ">
                    <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">   
                        <tbody>
                          <tr>
                           <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
   <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"> 
       <font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td> 
         </tr>
      </tbody>
   </table>  
    </td>
       <td>
    <table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
       <tbody>
          <tr>
           <td align="center" valign="top" style=" ">
             <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">   
               <tbody>
               <tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;   font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
    <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
        <font size="1" face="Arial">
            <span style="font-size:12px;">
                <font color="white">
                    <span style="display:block;">
                        <b>GET A QUICK QUOTE</b>
                    </span></font></span></font></a>
                      </td>
                    </tr>
                 </tbody>
                </table>
               </td> 
           </tr>
       </tbody>
    </table>    

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

Answer 2

在float:left标记中添加<table>，它就可以了。

用我的代码替换你的代码

<tr>
   <td width="540" valign="top">

        <table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
               <td align="center" valign="top" style=" ">
                <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">   
                <tbody>
                  <tr>
                           <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
   <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"> 
       <font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td> 
         </tr>
      </tbody>
   </table>  

    <table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse;float:left; mso-table-lspace:0pt; mso-table-rspace:0pt;">
       <tbody>
          <tr>
           <td align="center" valign="top" style=" ">
             <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">   
               <tbody>
               <tr>
                     <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;   font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
                      </td>
                    </tr>
                 </tbody>
                </table>
               </td> 
           </tr>
       </tbody>
    </table>    

  </td>
</tr>

如何在outlook中平等对齐左右列？

2 个答案: