没有缩进的HTML Bullet点

Question

I'm creating an html email and want to create bullet points without indent. Because it's an email it has to be html and inline CSS. Is there a way to edit your bullet settings? These are multi line bullets.

Answer 1

Just put • at the start of the line, instead of a list:

&bull; List item here<br />
&bull; Another list item here

Renders as:

• List item here
• Another list item here

This way you can be sure it will be consistent across email clients.

Answer 2

Unordered list tag has a default padding assigned to it, you can override it by giving margin-left: -10px css. this should resolve your issue.

On giving a 0px padding you will end up losing your bullets.

Thanks

Answer 3

You can assign a choice of two properties to alter position of bullet points: list-style-position: outside; list-style-position: inside; list-style-position: outside; list-style-position: inside;

Then adjust padding accordingly.

See this example on Codepen .

You will still need to deal with display differences within individual email clients however.

Answer 4

Just set the ULs margin and padding to zero.

<ul style="margin:0;padding:0">
  <li></li>
</ul>