电子邮件模板 HTML 从 ul 中删除项目符号
[英]Email template HTML remove bullet points from ul
问题描述
I am currently trying to make some email templates to be send via an Email client (SendGrid in this case).
我目前正在尝试通过电子邮件客户端（在本例中为 SendGrid）发送一些电子邮件模板。 After doing some research on how to create these templates I came to the conclusion that using regular HTML & CSS is not the way to go since Mail client preprocessors (Mainly Gmail & Outlook) strip almost all styles which have been applied that are not inline.在对如何创建这些模板进行了一些研究之后，我得出的结论是，使用常规的HTML和CSS不是可行的方法，因为邮件客户端预处理器（主要是 Gmail 和 Outlook）几乎删除了所有已应用的非内联样式。 However I still am having one Issue.但是我仍然有一个问题。
I can't seem to get rid of the bullet points using List-style-type: none even inline on the UL and on each LI tag.我似乎无法摆脱使用List-style-type: none 甚至内联在UL和每个LI标签上的要点。 Anybody has experience on how to remove bullet points from UL or an LI when it comes to Email templates?在电子邮件模板方面，任何人都有如何从UL或LI删除项目符号的经验？
4 个解决方案
解决方案1
1 2018-09-25 10:35:46
If the normal CSS isn't working, then you can try to set an blank 1x1 transparent image as the list markers.如果普通 CSS 不起作用，那么您可以尝试将空白的 1x1 透明图像设置为列表标记。
ul.a {
list-style-image: url('data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=');
}
解决方案2
0 2018-09-25 08:55:09
You need to set list-style-type: none;您需要设置list-style-type: none; to li element to remove bullet points.到 li 元素以删除项目符号。
To remove bullet from UL you can simply use list-style: none;要从 UL 中删除项目符号，您可以简单地使用list-style: none; or list-style-type: none;或list-style-type: none; If still not works then i guess there is an issue of priority css.如果仍然不起作用，那么我想存在优先级 css 的问题。 May be globally UL already defined.可能是全球 UL 已经定义的。 So best way add a class to that particular UL and add your css there.所以最好的方法是向那个特定的 UL 添加一个类并在那里添加你的 css。 Hope it will works.希望它会起作用。
解决方案3
0 2018-09-25 09:53:40
You may add list-style-type: none;您可以添加list-style-type: none; to ol, ul tags and to apply it forcefully you may add '!important'到 ol, ul 标签并强行应用它，您可以添加 '!important'
eg: list-style-type: none !important;例如： list-style-type: none !important;
解决方案4
0 2020-09-18 01:30:33
You need to combine list-style: none;你需要结合list-style: none; with a solution for Outlook, which is to conditionally push them away from sight, like so:使用 Outlook 的解决方案，即有条件地将它们从视线中推开，如下所示：
Put this in your <head> section:把它放在你的<head>部分：
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
li {
text-indent: -3em;
}
</style>
<![endif]-->
With list:附名单：
<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>
Note that Outlook does not respect margins in <ul> , and others have defaults, so it is best to always reset margins and paddings and then apply margins (not padding) in <li>请注意，Outlook 不考虑<ul>边距，其他人有默认值，因此最好始终重置边距和填充，然后在<li>应用边距（非填充）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.