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

外側のテーブルには 2 つの行があります。最初の行には 2 つの列があり、2 番目の行には 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

最初の行では、最初のセルを 2 番目のセルと交換しました。間隔が必要な場合は、追加できますpadding-left:10px;

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

于 2013-05-03T02:12:07.040 に答える