电子邮件模板 HTML 从 ul 中删除项目符号

Question

我目前正在尝试通过电子邮件客户端（在本例中为 SendGrid）发送一些电子邮件模板。 在对如何创建这些模板进行了一些研究之后，我得出的结论是，使用常规的HTML和CSS不是可行的方法，因为邮件客户端预处理器（主要是 Gmail 和 Outlook）几乎删除了所有已应用的非内联样式。 但是我仍然有一个问题。

我似乎无法摆脱使用List-style-type: none 甚至内联在UL和每个LI标签上的要点。 在电子邮件模板方面，任何人都有如何从UL或LI删除项目符号的经验？

Answer 1

如果普通 CSS 不起作用，那么您可以尝试将空白的 1x1 透明图像设置为列表标记。

ul.a {
    list-style-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=');
}

Answer 2

您需要设置list-style-type: none; 到 li 元素以删除项目符号。

要从 UL 中删除项目符号，您可以简单地使用list-style: none; 或list-style-type: none; 如果仍然不起作用，那么我想存在优先级 css 的问题。 可能是全球 UL 已经定义的。 所以最好的方法是向那个特定的 UL 添加一个类并在那里添加你的 css。 希望它会起作用。

Answer 3

您可以添加list-style-type: none; 到 ol, ul 标签并强行应用它，您可以添加 '!important'

例如： list-style-type: none !important;

Answer 4

你需要结合list-style: none; 使用 Outlook 的解决方案，即有条件地将它们从视线中推开，如下所示：

把它放在你的<head>部分：

  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
    li {
        text-indent: -3em;
    }
  </style>
  <![endif]-->

附名单：

<ul style="margin:0;padding:0;list-style:none;">
  <li style="margin:0 0 16px 30px;padding:0;">content</li>
  <li style="margin:0 0 16px 30px;padding:0;">content</li>
</ul>

请注意，Outlook 不考虑<ul>边距，其他人有默认值，因此最好始终重置边距和填充，然后在<li>应用边距（非填充）

电子邮件模板 HTML 从 ul 中删除项目符号

问题描述

4 个解决方案

解决方案1
1 2018-09-25 10:35:46

解决方案2
0 2018-09-25 08:55:09

解决方案3
0 2018-09-25 09:53:40

解决方案4
0 2020-09-18 01:30:33

电子邮件模板 HTML 从 ul 中删除项目符号

问题描述

4 个解决方案

解决方案1 1 2018-09-25 10:35:46

解决方案2 0 2018-09-25 08:55:09

解决方案3 0 2018-09-25 09:53:40

解决方案4 0 2020-09-18 01:30:33

解决方案1
1 2018-09-25 10:35:46

解决方案2
0 2018-09-25 08:55:09

解决方案3
0 2018-09-25 09:53:40

解决方案4
0 2020-09-18 01:30:33