我該如何讓這個元素出現在代碼中？

我是製作一封HTML郵件，而且我大部分元素都是應該顯示的。但出於某種原因，我試圖插入的一個元素，一個帶有地址和聯繫人的小方框並不像它應該顯示的那樣。我該如何讓這個元素出現在代碼中？

底部帶有地址的灰條應該與主白色框的寬度相同，並且應該被藍色包圍。

我的代碼是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>BigParser</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
    </head> 
    <body style="margin: 0; padding: 0;"> 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
     <!--main background color, size, etc.--> 
     <tr bgcolor= "#21A1EC"> 
     <td align="center" style="padding: 40px 0 30px 0;"> 
      <!--this BigParser logo at the top--> 
      <img src="bigparser.gif" width="186" height="43" style="display:block;" /> 
     </td> 
     </tr> 
     <tr bgcolor= "#21A1EC"> 
     <td align="center"> 
      <table border="1" cellpadding="0" cellspacing="0" width="600"> 
      <!--creates main padded content table--> 
      <tr width=100% bgcolor= "#ffffff"> 
       <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
       <!--title formatting--> 
       Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix--> 
       </td> 
      </tr> 
      <tr width="100%" bgcolor= "#ffffff"> 
       <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
       <!--content formatting--> 
       content text 
       </td> 
      </tr> 
      <tr> 
       <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
       <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
       <tr align="center" > 
        <!--this contains unsub link and copyright--> 
        <td bgcolor="50B54D" width="60%"> 
        unsub link 
        </td> 
        <td bgcolor="EC552B" width="40%"> 
        social media links 
        </td> 
       </tr> 
       </table> 
      </tr> 
      <tr bgcolor="EEEFF1" align="left" style="font-size:15;"> 
       <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;"> 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
       </td> 
      </tr> 
      </table> 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

但地址欄確實出現了正確格式，如果我移動它上面有綠色和橙色盒子，

<table border="1" cellpadding="0" cellspacing="0" width="600"> 
      <!--creates main padded content table--> 
      <tr width=100% bgcolor= "#ffffff"> 
       <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
       <!--title formatting--> 
       Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix--> 
       </td> 
      </tr> 
      <tr width="100%" bgcolor= "#ffffff"> 
       <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
       <!--content formatting--> 
       content text 
       </td> 
      </tr> 
      <tr bgcolor="EEEFF1" align="left" style="font-size:15;"> 
       <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;"> 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
       </td> 
      </tr> 
      <tr> 
       <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
       <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
       <tr align="center" > 
        <!--this contains unsub link and copyright--> 
        <td bgcolor="50B54D" width="60%"> 
        unsub link 
        </td> 
        <td bgcolor="EC552B" width="40%"> 
        social media links 
        </td> 
       </tr> 
       </table> 
      </tr>   
      </table>

我不知道爲什麼，這正在發生，我如何更改代碼以使地址出現在綠色和橙色框下方，但與上面的其他元素保持相同的寬度？

來源

2017-07-01 Naman Shah

將地址行移動到取消鏈接/社交媒體鏈接表並將其設爲colspan="2"。我希望這是你所要求的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <title>BigParser</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
</head> 
 

 
<body style="margin: 0; padding: 0;"> 
 
    <table border="1" cellpadding="0" cellspacing="0" width="100%"> 
 
    <!--main background color, size, etc.--> 
 
    <tr bgcolor="#21A1EC"> 
 
     <td align="center" style="padding: 40px 0 30px 0;"> 
 
     <!--this BigParser logo at the top--> 
 
     <img src="bigparser.gif" width="186" height="43" style="display:block;" /> 
 
     </td> 
 
    </tr> 
 
    <tr bgcolor="#21A1EC"> 
 
     <td align="center"> 
 
     <table border="1" cellpadding="0" cellspacing="0" width="600"> 
 
      <!--creates main padded content table--> 
 
      <tr width=100% bgcolor="#ffffff"> 
 
      <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;"> 
 
       <!--title formatting--> 
 
       Lorem ipsum 
 
       <!--do not delete-->&nbsp&nbsp&nbsp&nbsp 
 
       <!-- centering title fix--> 
 
      </td> 
 
      </tr> 
 
      <tr width="100%" bgcolor="#ffffff"> 
 
      <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;"> 
 
       <!--content formatting--> 
 
       content text 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td align="left" valign="top"> 
 
      <!--this is the unsub/links box, contains the unsubscribe and links to social media--> 
 
      <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 
 
       <tr align="center"> 
 
       <!--this contains unsub link and copyright--> 
 
       <td bgcolor="#50B54D" width="60%"> 
 
        unsub link 
 
       </td> 
 
       <td bgcolor="#EC552B" width="40%"> 
 
        social media links 
 
       </td> 
 
       </tr> 
 
       <tr bgcolor="#EEEFF1" align="left" style="font-size:15;"> 
 
      <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2"> 
 
       BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191 
 
      </td> 
 
      </tr> 
 
      </table> 
 
      </td> 
 
      </tr> 
 

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

 
</html>

來源

2017-07-01 19:05:06

謝謝！現在它工作正常。 –

需要注意的是：colspan不適用於一些電子郵件客戶端。 – Syfer

你的代碼中有一些錯誤：你在值中使用沒有散列的顏色，你的表結構對你對代碼的添加是錯誤的（表不能放在tr中）。當給出答案時，試着改進這個人的代碼，以便將來他們很容易，所以他們不會犯同樣的錯誤。 – Syfer

我該如何讓這個元素出現在代碼中？

回答

相關問題