Bullet styling second line CSS

When styling unordered and ordered lists, the second line is sometimes under the bullet. This doesn't look good. 

This method is easy and works well: 

First, set list-style-type to outside to position the bullets outside of the text. 

ul li { list-style-position: outside; }

The text will be aligned. 

If you want the bullets to be in line with your text, add some margin: 

ul li { margin-left: 1em; }

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.