Second line in li starts under the bullet after CSS-reset

Question

I m having some problems with my ul-list after using applying CSS-reset  When the text in the li is long and it breaks to a second line  the text begins under the bullet  I d like it to start with the same margin padding as the text on the right side of the bullet  Sort of hard to explain  but if you look at the example-image  The left-image is the list today   quot motta varsel       quot  begins under the bullet  but I d like it to look the picture on the right  How can I do this with CSS  I assume there is something very simple I ve overlooked  but I can t figure out what  Google searches did not return anything useful either

User · Answer

Here is a good example -   ul li      list-style-type  disc      list-style-position  inside      padding  10px 0 10px 20px      text-indent  -1em      Working Demo  http   jsfiddle net d9VNk

User · Answer

The li tag has a property called list-style-position  This makes your bullets inside or outside the list  On default  it   s set to inside  That makes your text wrap around it  If you set it to outside  the text of your li tags will be aligned   The downside of that is that your bullets won t be aligned with the text outside the ul  If you want to align it with the other text you can use a margin   ul li                 We want the bullets outside of the list         so the text is aligned  Now the actual bullet        is outside of the list   s container             list-style-position  outside                 Because the bullet is outside of the list   s        container  indent the list entirely             margin-left  1em        Edit 15th of March  2014 Seeing people are still coming in from Google  I felt like the original answer could use some improvement   Changed the code block to provide just the solution Changed the indentation unit to em   s Each property is applied to the ul element Good comments

User · Answer

I second Dipaks  answer  but often just the text-indent is enough as you may maynot be positioning the ul for better layout control   ul li  text-indent  -1em

[html] Second line in li starts under the bullet after CSS-reset

Examples related to html

Examples related to css