0

我正在尝试创建一个 HTML 电子邮件，这就是我使用表格的原因。我有一些开头的文字，后面跟着一些要点。但是，开始文本被推到右侧，而不是在项目符号点上方排列。

这是一个简单的小提琴：http: //jsfiddle.net/wWxYg/

我的 HTML：

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">
            <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
                Title Section Goes Here
            </p>  
            <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>   
            <p style="margin: 13px 0 13px; color: #585A63;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
            </p>     
            <p style="margin: 13px 0 13px; color: #585A63;">
                Sub Title Goes Here:<br /><br />
             </p>
                </td>
            </tr>
            <tr>
                <td>

                    <table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 1</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 2</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 3</td>
                        </tr>

                        <tr><td>&nbsp;</td></tr>

                        <tr>
                            <td width="5" height="15" valign="top">&bull;</td>
                            <td width="250" height="15" valign="top">Interesting point number 4</td>
                        </tr>
                    </table>

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

3 回答 3

1

在您的外部表中，您有两行。第一行有两列，第二行只有一列。如果删除包含间隔图像的第一行中的列，它应该正确排列。

删除这个：

   <td width="15" align="left" valign="top">
       <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />          
   </td>
于 2013-05-03T01:54:50.943 回答
0

这似乎是因为您将一张表嵌套在另一张表中。这是他们嵌套的小提琴：http: //jsfiddle.net/wWxYg/1/

这也是代码。

<table bordercolor="#FF0000" style="color:#585A63; font-family:Arial,Helvetica, sans-serif; background:#FFFFFF;width:600px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="15" align="left" valign="top">
            <img src="images/spacer.gif" width="15" height="2" border="0" alt=" "/>          
        </td>
        <td width="288" align="left" valign="top" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 288px;">

          <p style="font-size: 22px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">
          Title Section Goes Here
          </p>

          <p style="margin: 1em 0; color:#585A63; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight: normal;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa dolor. Integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.
          </p>

          <p style="margin: 13px 0 13px; color: #585A63;">
          Sub Title Goes Here:<br /><br />
          </p>
        </td>
    </tr>                
</table>

<table width="260" style="color: #585A63; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: #FFFFFF; width: 260px;">
    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 1</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 2</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 3</td>
    </tr>

    <tr><td>&nbsp;</td></tr>

    <tr>
        <td width="5" height="15" valign="top">&bull;</td>
        <td width="250" height="15" valign="top">Interesting point number 4</td>
    </tr>
</table>
于 2013-05-03T01:53:19.473 回答
0

在第一行中，我将第一个单元格与第二个单元格交换了。如果你想要间距，你可以添加一个padding-left:10px;

jsfiddle：http: //jsfiddle.net/wWxYg/2/

于 2013-05-03T02:12:07.040 回答