所以我正在尝试创建一个将通过outlook发送的html电子邮件。问题似乎是ol和ul分组，我无法弄清楚如何解决它。当我点击发送按钮之前在浏览器或Outlook中查看html时，它看起来像这样：
但是，电子邮件的出现是：
我并不关心间距，因为列表样式已被删除。
额外信息：使用outlook发送，在gmail webclient中查看。另外，如果我在outlook中查看它，它看起来很好。
有人要求提供HTML。你走了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="margin: 0 auto;">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="border:thin #e7e8e9 solid;">
<tr>
<td style="padding: 10px 25px;"><p style="text-align:right; color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">Problems viewing email? <a href="#" style="color: #0077c0;">View online version</a></p></td>
</tr>
<tr>
<td style="background-color: #0077c0"><a style="border: none; margin: 0; padding: 0" href="#"><img style="border: none; margin: 0; padding: 0;" src="images/top-image.jpg" width="640" height="300" alt="The 2013 Health and Group Benefit Options are Here." border="0" /></a></td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 20px;">
<h1 style="color: #0077c0; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 20px">Annual Enrollment for Your 2013 Benefits Is Open</h1>
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px; ">Overview</h2>
<p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px;">The Annual Enrollment period for 2013 health and group benefits is open <span style="letter-spacing: 1px; color: #0077c0;">now through Friday, Nov. 16.</span> Log on to <a style="text-decoration: none; color: #0077c0;" href="#">Your Benefits Resources</a> to review your options and enroll. The online tools can help determine the option that best meets your and your family’s needs.</p>
</td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">Who should enroll</h2>
<ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to change their benefits coverage for 2013.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to enroll in a Health Care or Dependent Care Flexible Spending Account for 2013.</li>
</ul>
</td>
</tr>
<tr>
<td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
<h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">If you don't enroll</h2>
<ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">Your 2013 benefits enrollment will default to the coverage most similar to your 2012 coverage.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">You won’t be signed up for Health Savings Account or Flexible Spending Account deductions. Health Savings Account and Flexible Spending Account elections do not carry over from year to year. </li>
</ul>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color:#f1f1f2;">
<tr>
<td colspan="2" style="padding:20px 20px;"><h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin:0; padding:0;">How to Enroll</h2></td>
</tr>
<tr>
<td colspan="2">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color: #0077c0;">
<tr>
<td><img style="margin: 0; padding: 0" src="images/enroll-online.jpg" width="197" height="70" alt="Enroll online" border="0" /></td>
<td><a style="border: none; margin: 0; padding: 0" href="#"><img style="margin: 0; padding: 0" src="images/enroll-now-button.jpg" width="108" height="70" alt="Enroll now!" border="0" /></a></td>
<td><img style="margin: 0; padding: 0" src="images/enroll-by-phone.jpg" width="335" height="70" alt="Enroll by Phone" border="0" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-right:thin #e7e8e9 solid; width: 270px;">
<ol style="margin: 15px 20px 0 40px; padding: 0; width: 260px; list-style-type:decimal;">
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Log on to <a style="text-decoration: none; color: #0077c0;" href="http://resources.hewitt.com/williams">Your Benefits Resources.</a> A log-on ID (your Social Security number) and password are required.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Use the online tools to compare your medical options to determine the best option for you and your family, and to estimate the amount to contribute to your Health Savings Account and Health Care and/or Dependent Care Flexible Spending Accounts. </li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Make your choices online.</li>
<li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Print your confirmation statement. You will also receive a confirmation of your enrollment at the home address on file. </li>
</ol>
</td>
<td valign="top" style="width:280px; margin: 0 20px 0 20px;"><p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding: 0 20px; font-weight: normal; line-height: 1.5; margin: 15px 0;">Call the Williams Benefits Center (at Hewitt) at <span style="color: #0077c0;">866-</span> or <span style="color: #0077c0;">866-9</span> weekdays from 8am to 5pm CT.</p> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 10px 20px;"><p style="font-size: 10px; color: #939598; font-family:Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.5;">©2012 Williams Companies Inc</p></td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：38)
在电子邮件中执行项目符号列表的最佳方法是使用表格来模仿它们。 Click here for JSFiddle。
<table cellspacing="0" cellpadding="0">
<tr><td width="20" align="center" valign="top">•</td>
<td width="200" align="left" valign="top">Text text text text text text</td>
</tr>
<tr><td align="center" valign="top">•</td>
<td align="left" valign="top">Really really really long and wrapping text here text here text here text here text here </td>
</tr>
</table>
请务必使用align和valign =“top”，以便您的项目符号与长文本包装文本的顶部保持齐平。
答案 1 :(得分：0)
在列表前添加<br />标记。
注意：P，H和List标记不能很好地编码所有电子邮件客户端。
段落结尾/间距使用<br />标签。
样本：
<span style="font-size:14px; font-weight:bold;">Headline</span><br /><br />
my paragraph text here. <br />
<br />
<span... another headline here.
<br /><br />
<ol>
<li> etc.
创建列表的另一种方法是在表格中创建它们（不是那么容易，但保证了电子邮件客户端之间的正确间距）。
请参阅广告系列监视器，查看电子邮件客户端可接受的CSS规则列表。 here
答案 2 :(得分：0)
在某些情况下，Microsoft Outlook编译器有时会忽略填充和标准CSS样式。话虽如此，请尝试为打算通过电子邮件发送的HTML代码编写非常简单的代码和内联样式。
为您的列表项尝试以下代码：
<tr>
<!-- Row container for Intro/ Description -->
<td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #191919; line-height: 1.8; text-align:justify; padding:0px 20px 0px 20px; font-family: sans-serif;">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</td>
</tr>
我希望能帮上忙，
谢谢！
〜牛顿
答案 3 :(得分：0)
我通过为(ngModelChange)="def($event,2)"和ul标签设置一些额外的边距来解决该问题：
这是因为Outlook为列表设置了一些负边距（我认为），因此您应该为它们设置一些额外的边距：
ol