How to keep indent for second line in ordered lists via CSS?

by

Update

This answer is outdated. You can do this a lot more simply, as pointed out in another answer below: 

ul {
  list-style-position: outside;
}

See https://www.w3schools.com/cssref/pr_list-style-position.asp

Original Answer

I’m surprised to see this hasn’t been solved yet. You can make use of the browser’s table layout algorithm (without using tables) like this:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

enter image description here

To make it work in IE8, use the legacy :before notation with one colon.

More Related Contents:

  1. Does UL have default margin or padding [duplicate]
  2. Li item on two lines. Second line has no margin
  3. How to display an unordered list in two columns?
  4. How can you customize the numbers in an ordered list?
  5. CSS: Control space between bullet and
  6. How to make a display in a horizontal row
  7. Responsive Separator for Horizontal List
  8. Removing ul indentation with CSS
  9. HTML + CSS: Ordered List without the Period?
  10. How do I justify a horizontal list?
  11. Best way to manage whitespace between inline list items
  12. Change the color of a bullet in a html list?
  13. HTML + CSS: Numbered list with numbers inside of circles
  14. HTML ordered list 1.1, 1.2 (Nested counters and scope) not working
  15. How to center an unordered list?
  16. HTML list-style-type dash
  17. Is it possible to specify a starting number for an ordered list?
  18. How can I prefix ordered list item numbers with a static string using CSS?
  19. Can you style ordered list numbers?
  20. Adding text before list
  21. Two divs side by side – Fluid display [duplicate]
  22. Expand a div to fill the remaining width
  23. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  24. Apply style to parent if it has child with CSS [duplicate]
  25. Why doesn’t CSS ellipsis work in table cell?
  26. CSS Float Logic
  27. Centering floating divs within another div
  28. How to center div vertically inside of absolutely positioned parent div
  29. Center an image horizontally using CSS
  30. Alternate background colors for list items

Leave a Comment