在 Outlook 中呈现的电子邮件中的 ul 标签问题答案

【问题标题】：issue with ul tags in email rendered in outlook在 Outlook 中呈现的电子邮件中的 ul 标签问题
【发布时间】：2016-08-07 07:24:55
【问题描述】：

我正在尝试创建一个将发送给用户的 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>

但是直到现在，我无法解决这个问题。任何意见将不胜感激。

【问题讨论】：

您希望它是什么样的？您的 html 不正确...您在此处关闭了太多 TD：列表项 1：。另外，你能提供一个代码的jsfiddle吗？我将编辑并链接回正确的。

标签： html css email outlook

【解决方案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>

【讨论】：