0

how can I increase the margin between the numeral and the text in an ordered list?

i.e.

<ol>
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
</ol>

Produces

  1. text 1
  2. text 2
  3. text 3

And I want

  1. __ text 1
  2. __ text 2
  3. __ text 3

Where __ is an arbitrary indentation.

Nicolas
  • 2,297
  • 3
  • 28
  • 40

2 Answers2

2
<ol>
<li><span class="indent">text 1</span></li>
<li><span class="indent">text 2</span></li>
<li><span class="indent">text 3</span></li>
</ol>
<style="text/css">
ol li .indent{padding-left:20px;}
</style>
maiorano84
  • 11,574
  • 3
  • 35
  • 48
  • That does not work. It indents the whole line, not the text after the number. – Nicolas Apr 11 '13 at 20:42
  • It works but it is an extremely long list and I dont want to overload it with so many tags, it shouldn't be necessary to add a tag to each text to achieve this – Nicolas Apr 11 '13 at 20:45
  • You're right. As @Marc pointed out in his jsfiddle example, it shouldn't be necessary. But it looks like you found the answer, so good on you. – maiorano84 Apr 11 '13 at 20:47
1

Found the answer here

I modified the fiddle to work for what I needed.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}
li {
    display: block;
    margin-bottom: .5em;
    margin-left: 2em;
}

li:before {
    display: inline-block;
    content: counter(item) ".";
    counter-increment: item;
    width: 2em;
    margin-left: -2em;
}
Community
  • 1
  • 1
Nicolas
  • 2,297
  • 3
  • 28
  • 40