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

时间:2018-09-25 08:49:50

标签: html css email templates

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

使用EventDispatcher甚至在List-style-type:和每个UL标签上都没有内联,似乎无法摆脱要点。在使用电子邮件模板方面,有人对如何从LIUL删除项目符号有经验吗?

4 个答案:

答案 0 :(得分:0)

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

要从UL中删除项目符号,您可以简单地使用list-style-type: none;AMAZON.FallbackIntent如果仍然不起作用,那么我想这是优先级CSS的问题。可能在全球范围内已经定义了UL。因此,最好的方法是将类添加到该特定的UL并在其中添加CSS。希望它能工作。

答案 1 :(得分:0)

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

例如:列表样式类型:无!重要;

答案 2 :(得分:0)

如果普通CSS无法正常工作,则可以尝试将空白的1x1透明图像设置为列表标记。

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

答案 3 :(得分:0)

您需要将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>中应用边距(不填充)