proper indenting for ordered lists in html

Question

I cannot get an ordered list to show proper indenting. The numbers are all aligned to the right. So the browser (Chrome) shows a space before the single digit numbers and only aligns the double digit numbers correctly to the left.

How can I output a nice ordered list where the numbers are all aligned to the left and the list items all start below each other?

Plank

You need to show some code or a screen shot. – Ventilation

Answer 1

Actually, the solution is pretty simple, just set

ol {list-style-position: inside;}

And your numbers should "align to the left" like you want.

Shirelyshirey

That aligns the numbers to the left, yes. But the li content is not aligned. – Plank

Well shoot, now you're bein picky. ;) Add some left padding to your li and see if that works. li{padding-left: 4em;} – Shirelyshirey

Answer 2

Late to the party but I've just been wrestling with this problem myself and ended up using this combo which adds a zero before any single digit list items:

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}

Mannequin

@Mark adding any unit after 0 looks like copy-pasted from Firebug, sure :) As for the hacky part, to my surprise it seems to work in IE8+ according to MDN: list-style-type. So +1 for Paul and welcome on SO! :) – Aaron

no, i mean "decimal-leading-zero", i have never seen this in any CSS. – Buggs

it's supported in IE8 and up and probably also in most of the other main browsers. I actually got my clue from dev.opera and figured it must be pretty standard css if Opera supports it. – Mannequin

Answer 3

If you don't mind using absolute positioning, this might work for you.

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

Note: If you've got anything appearing to the left of the <ol> element on your page (like a floating div), that content will move the numbers to the right, but not the acutal <li> content.

You could also use a whole different technique, with a different markup (nested div elements) with display:table and display:table-cell properties set. That would eliminate the issue with elements appearing on the left, but would require you to utilize the CSS counter property.

Penn

Thanks a bunch. That worked great. I just had to remove the padding to the left and now it looks the way I want it to look. – Plank

Uggh. Hmm... it looks okay on a test page. I will not be able to use absolute positioning, though. – Plank

Answer 4

Jo Sprague was not too far off, but it's actually outside and not inside as stated above.

It becomes immediately apparent if the contents of a li wraps to a new line.

<style type="text/css">
   ol { width: 250px; }
   li { list-style-position: outside; }
</style>

<ol>
   <li>
       This is an list item that is very 
       long so you may know if the content 
       will be aligned to it's sibling
   </li>
   <li>Just a short list item</li>
</ol>

Here is a good codepen https://codepen.io/pen/ for testing.

Kincardine

Answer 5

You can use CSS to select a range; in this case, you want list items 1-9:

ol li:nth-child(n+1):nth-child(-n+9) 

Then adjust margins on those first items appropriately:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

See it in action here: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Topflight

Problem with this approach is that it selects the children, and not the nth list-item. Say my list starts at 3, then the 10th child would be item 12. 10 and 11 would not indent correctly. – Ununa

Answer 6

ol ol {
  counter-reset: item;
  padding-inline-start: 35px;
}
ol ol li {
  list-style-type: none;
}
ol ol li::before {
  content: counters(item, '', upper-latin)'.';
  counter-increment: item;
  display: inline-block;
  text-indent: -25px;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
    <ol>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
      <li>item 13</li>
      <li>item 14</li>
    </ol>
  <li>item 15</li>
  <li>item 16</li>
</ol>

I know this post is old but while I was looking for a solution it led me here. After a bit of search, this is what I came up with:

Instead of using markers, pseudo element (before) with a counter for the content can be used.

counters css function takes the counter name defined in counter-reset, followed by a separator (nothing in this case), and a counter style (upper-latin in this case). Since I wanted a period after each letter, I added it after the function. The separator only used for multiple counters such as A.B, the last counter does not get it so with one counter it's not shown which is not what I wanted.

Then pseudo elements can be negative-indented while ordered list padding can be used to adjust spacing with the list content.

Caylacaylor