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

【问题标题】：Email template HTML remove bullet points from ul电子邮件模板 HTML 从 ul 中删除项目符号
【发布时间】：2019-02-28 20:06:19
【问题描述】：

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

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

【问题讨论】：

看到这个link
@Pieter，电子邮件模板是一个诅咒词。据我所知，您可以使用 SendGrid 创建自定义模板。但是您应该能够通过定位 <ul> 并设置 list-style: none; 来删除项目符号。
@AnureshVP，请不要只通过链接引用内容，因为它可以随时删除，导致您的链接被破坏。
欢迎来到 StackOverflow。请通过tour 环顾四周，并阅读HELP center，然后阅读How to 、What types of questions should I avoid asking? 并提供MCVE : Minimal, Complete, and Verifiable Example。如果周围的人可以轻松阅读并理解您的意思或问题所在，他们将更愿意提供帮助:)

标签： html css email templates

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以在 ol、ul 标签中添加 list-style-type: none; 并强制应用它，你可以添加'！important'

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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> 中应用边距（而不是填充）

【讨论】：