<li> alignment with long text

Question

Heyho, i just found a strange visual inconsistence with list elements on my homepage: If the text inside a li element is longer than 1 line, the second line ist not aligned anymore to the first line of the text.

I have replaced the normal list icon, with an selfmade icon by using li:before in my stylesheet and this is causing the error. I can align the first line of the li element just fine, but if the text is longer than the error occur.

So i was wondering if there is a solution to this, without replacing the li:before icon with an image by using list-style-image or background image? Maybe some of you have an idea :)

Answer 1

Just apply list-style-position: outside; to your li elements

 li { list-style-position: outside; } 

 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co </li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis vel lectus eget elementum. Sed lacinia vulputate egestas. Aenean fringilla, tortor sed tincidunt venenatis, justo enim porttitor quam, quis consequat quam erat a augue. Proin pellentesque condimentum ante et viverra. Quisque tristique nisl id varius varius. Donec elit magna, auctor vel nunc sed, fermentum euismod ipsum. Aenean ut nisl enim. Curabitur leo est, pharetra at magna ut, pellentesque posuere tortor. Curabitur posuere ut turpis non sagittis. Vestibulum sit amet libero porttitor, dapibus orci in, tincidunt felis. Pellentesque ac tempor libero, nec lacinia orci. Ut dictum augue faucibus feugiat mollis. Ut turpis justo, placerat ac congue in, co </li> </ul> 

Answer 2

Please add the following style to the list. Below are the example.

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

Demo

Answer 3

Just found a solution in combination with the li:before icon replacement:

ul li { text-indent: -1em; }

with this i can align the first line, so the error does not occur anymore. Thanks for your help and ideas :)