6

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?

enter image description here

Frank Vilea
  • 8,323
  • 20
  • 65
  • 86

4 Answers4

13

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

JsFiddle

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • in your example if i delete `list-style-position:outside` , then there is no effect on structure. – xkeshav Apr 20 '11 at 12:01
  • 1
    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. – Frank Vilea Apr 20 '11 at 12:02
  • Yes, it is usually the default. `inside` will do what appears in OP's example. – Wesley Murch Apr 20 '11 at 12:03
  • @Frank Vilea: Must be something else in your css, it's working fine [here](http://jsfiddle.net/Madmartigan/TdYvu/7/). 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. – Wesley Murch Apr 20 '11 at 12:12
  • Thanks, I simply had to apply float: left; which is what I forgot and why it did not work previously. – Frank Vilea Apr 20 '11 at 12:13
1

Please try and use this property

li {
    list-style-position:outside;
}

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

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Karthik
  • 1,091
  • 1
  • 13
  • 36
0

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

 ul {
    list-style: disk outside;
 }
Nathan Tuggy
  • 2,237
  • 27
  • 30
  • 38
Joansy
  • 159
  • 12
0

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

<li>
  <div>Schnelles Importieren von Images As Planes</div> 
</li>
Kon
  • 27,113
  • 11
  • 60
  • 86
  • Thanks Kon. I tried it but it seems to cause problems with Firefox. – Frank Vilea Apr 20 '11 at 12:04
  • Well, you'll have to make some styling adjustments probably (e.g. margin, padding, display inline?) – Kon Apr 20 '11 at 12:09
  • 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 Apr 20 '11 at 12:12
  • Adding divs is more of a last resort when css solutions are available. – Wesley Murch Apr 20 '11 at 12:13
  • @Madmartigan, I'd say that's argumentative. Depends on context of the problem. – Kon Apr 20 '11 at 12:21
  • 1
    @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. – Wesley Murch Apr 20 '11 at 12:26
  • 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. – Kon Apr 20 '11 at 12:27