Question

我正在尝试创建一个将发送给用户的html模板。呈现的电子邮件的问题是列表未正确呈现，格式化和嵌套列表结构正在丢失。此问题在Outlook上，而在浏览器中格式正确。

我遵循以下主题（Trouble with ol and ul tags in email sent with Outlook）并尝试使用表格模拟列表。它适用于单个列表。但由于我有嵌套列表，我无法正确获得渲染设置。

我遵循了以下方法：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> List Item 1: </td>
    </tr>
    <tr>
        <td></td> // Empty column, since sub-list should be at different level
        <td>
          <table cellspacing="0" cellpadding="0">
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top"></td> Nested List Item 1: </td>
           </tr>
         </table>
       </td>
   </tr>
</table>

我还试图通过计划一个额外的空列而不是嵌套表来嵌套内部列表。

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> List Item 1: </td>
    </tr>
    <tr>
        <td width="20"></td> // empty column 
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"></td> Nested List Item 1: </td>
    </tr>
</table>

但到现在为止，我无法解决这个问题。任何投入都将受到赞赏。

Answer 1

代码中有太多TD被关闭。另外，imo，嵌套列表应该放在它所嵌套的项目的TD内部，如果嵌套列表位于第一个TD的内部，任何查看未来代码的人都将更好地理解这些内容是如何链接的。项目

这是一个JSfiddle：https://jsfiddle.net/jabafpts/

最后，代码：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"> List Item 1
          <table cellspacing="0" cellpadding="0">
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top">Nested List Item 1 </td>
           </tr>
           <tr>
             <td width="20" align="center" valign="top">&#10004;</td>
             <td align="left" valign="top">Nested List Item 2 </td>
           </tr>
         </table>
        </td>
    </tr>
    <tr>
        <td width="20" align="center" valign="top">&bull;</td>
        <td align="left" valign="top"> List Item 2</td>
    </tr>
</table>

在Outlook中呈现的电子邮件中使用ul标签的问题

1 个答案: