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?

Allina

Can you please post your HTML? – Condensate

Answer 1

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

JsFiddle

Billposter

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

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. – Allina

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

@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. – Billposter

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

Answer 2

Please try and use this property

li {
    list-style-position:outside;
} 

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

Quarters

Answer 3

Sure, easy enough. Within your <li> do this:

<li>
  <div>Schnelles Importieren von Images As Planes</div> 
</li>

Massachusetts

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

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

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. – Allina

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

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

@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. – Billposter

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. – Massachusetts

Answer 4

This is the most condensed CSS, using the shorthand property syntax:

 ul {
    list-style: disk outside;
 }

Allometry