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). 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. 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. Anybody has experience on how to remove bullet points from UL or an LI when it comes to Email templates?

回答1:

If the normal CSS isn't working, then you can try to set an blank 1x1 transparent image as the list markers.

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

回答2:

You need to set list-style-type: none; to li element to remove bullet points.

To remove bullet from UL you can simply use list-style: none; or list-style-type: none; If still not works then i guess there is an issue of priority css. May be globally UL already defined. So best way add a class to that particular UL and add your css there. Hope it will works.

回答3:

You may add list-style-type: none; to ol, ul tags and to apply it forcefully you may add '!important'

e.g: list-style-type: none !important;

回答4:

You need to combine list-style: none; with a solution for Outlook, which is to conditionally push them away from sight, like so:

Put this in your <head> section:

  <!--[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>

来源：https://stackoverflow.com/questions/52494112/email-template-html-remove-bullet-points-from-ul

标签

html

css

templates