在前景中呈现的电子邮件中的ul标签问题 [英] issue with ul tags in email rendered in outlook

问题描述

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

I am trying to create an html template that will be sent out to users.The issue with the rendered email is that the lists are not being rendered correctly, the formatting and nested list structure is being lost. This issue is on Outlook, whereas the formatting is correct in browser.

我遵循以下线索（使用Outlook发送的电子邮件中的ol和ul标签麻烦），并尝试使用表格模拟列表。它适用于单个列表。但是，由于我有嵌套列表，我无法正确地获取渲染设置。

I followed the following thread (Trouble with ol and ul tags in email sent with Outlook) and tried to mimic a list using a table. It works fine for a single list. But since I have nested lists, I am unable to get the rendering setup correctly.

我已经遵循以下方法：

<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>

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

I have also tried to nest the inner list by planing an extra empty column, instead of nested 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>

但到目前为止，我无法解决这个问题。任何输入将不胜感激。

But till now, I am unable to fix this. Any inputs would be appreciated.

推荐答案

代码中有太多的TD被关闭。此外，imo，嵌套列表应该放在它嵌套的项目的TD内，任何在未来查看代码的人都会更好地了解如果这些事情链接在TD内部的嵌套列表中，那么第一个项目。

The code has too many TDs being closed. Also, imo, the nested list should go inside the TD of the item it is nesting for, anyone looking at the code in the future will have a better understanding of how those things are linked if the nested list is inside the TD for the first item.

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

Here's a 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>

这篇关于在前景中呈现的电子邮件中的ul标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！