Text indentation in unordered lists with CSS

Question

I have an unordered HTML list and am using CSS to style everything. When the text has multiple lines, it starts before the bullet point. Is there a way to make it start after the bullet point position?

Solution 1

You want to use list-style-position:outside on your <ul>

JsFiddle

Solution 2

Please try and use this property

li {
    list-style-position:outside;
} 

or inside one or the other. This should fix the problem.

Comments

[Anton]

in your example if i delete list-style-position:outside , then there is no effect on structure.

[Frank Vilea]

Many thanks, I was actually using list-style-position: inside; because I wanted to indent all the bullet points. When I use the outside value I can't seem to apply margin-left/padding-left to the ul/li anymore.

[Wesley Murch]

Yes, it is usually the default. inside will do what appears in OP's example.

[Frank Vilea]

Thanks Kon. I tried it but it seems to cause problems with Firefox.

[Kon]

Well, you'll have to make some styling adjustments probably (e.g. margin, padding, display inline?)

[Wesley Murch]

@Frank Vilea: Must be something else in your css, it's working fine here. Mess around with the fiddle if you need to see how float, display properties, etc. affect it. I can't really say what the issue is without seeing code.

[Frank Vilea]

Firefox would start the text on a new line for some strange reason. It used to be pure text so I forgot to apply float: left; to the new bullet point list which was the reason why all these values would not work.

[Frank Vilea]

Thanks, I simply had to apply float: left; which is what I forgot and why it did not work previously.

[Wesley Murch]

Adding divs is more of a last resort when css solutions are available.

[Kon]

@Madmartigan, I'd say that's argumentative. Depends on context of the problem.

[Wesley Murch]

@Kon: CSS is for styling documents. HTML is for describing what they contain. Adding a meaningless div into a list item to achieve a visual effect that is easily possible with CSS to me has no advantage or purpose, but I'd be willing to listen to opposition.

[Kon]

No, you're right for the most part. I just wouldn't blindly apply CSS to everything without first considering if that's the appropriate solution for the problem at hand.