How can you customize the numbers in an ordered list

Question

How can I left-align the numbers in an ordered list   1   an item    skip some items for brevity  9   another item 10  notice the 1 is under the 9  and the item contents also line up   Change the character after the number in an ordered list   1  an item   Also is there a CSS solution to change from numbers to alphabetic roman lists instead of using the type attribute on the ol element   I am mostly interested in answers that work on Firefox 3

User · Answer

Stole a lot of this from other answers  but this is working in FF3 for me  It has upper-roman  uniform indenting  a close bracket    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt title gt  new document  lt  title gt   lt style type  text css  gt   lt  -- ol     counter-reset  item    margin-left  0    padding-left  0    li     margin-bottom   5em    li before     display  inline-block    content  counter item  upper-roman         counter-increment  item    width  3em    -- gt   lt  style gt   lt  head gt    lt body gt   lt ol gt     lt li gt One lt  li gt     lt li gt Two lt  li gt     lt li gt Three lt  li gt     lt li gt Four lt  li gt     lt li gt Five lt  li gt     lt li gt Six lt  li gt     lt li gt Seven lt  li gt     lt li gt Eight lt  li gt     lt li gt Nine lt  li gt     lt li gt Ten lt  li gt   lt  ol gt   lt  body gt   lt  html gt

User · Answer

There is the Type attribute which allows you to change the numbering style  however  you cannot change the full stop after the number letter    lt ol type  a  gt       lt li gt Turn left on Maple Street lt  li gt       lt li gt Turn right on Clover Court lt  li gt   lt  ol gt

User · Answer

The other answers are better from a conceptual point of view   However  you can just left-pad the numbers with the appropriate number of   amp ensp   to make them line up       Note  I did not at first recognize that a numbered list was being used   I thought the list was being explicitly generated

User · Answer

Quick and dirt alternative solution  You can use a tabulation character along with preformatted text  Here s a possibility    lt style type  text css  gt  ol       list-style-position  inside    li first-letter       white-space  pre     lt  style gt    and your html    lt ol gt   lt li gt     an item lt  li gt   lt li gt     another item lt  li gt       lt  ol gt    Note that the space between the li tag and the beggining of the text is a tabulation character  what you get when you press the tab key inside notepad    If you need to support older browsers  you can do this instead    lt style type  text css  gt  ol       list-style-position  inside     lt  style gt    lt ol gt       lt li gt  lt pre gt     lt  pre gt an item lt  li gt       lt li gt  lt pre gt     lt  pre gt another item lt  li gt           lt  ol gt

User · Answer

The docs say regarding list-style-position  outside     CSS1 did not specify the precise location of the marker box and for reasons of compatibility  CSS2 remains equally ambiguous  For more precise control of marker boxes  please use markers    Further up that page is the stuff about markers   One example is          LI before               display  marker             content      counter counter                  counter-increment  counter             width  6em             text-align  center

User · Answer

Nope    just use a DL   dl   overflow hidden    dt    float left   clear  left   width 4em     adjust the width  make sure the total of both is 100      text-align  right   dd    float left   width 50      adjust the width  make sure the total of both is 100      margin  0 0 5em

User · Answer

I have it  Try the following    lt html gt   lt head gt   lt style type  text css  gt       ol   counter-reset  item         li   display  block         li before   content  counter item       counter-increment  item           display  inline-block  width  50px      lt  style gt   lt  head gt   lt body gt   lt ol gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt       lt li gt Something lt  li gt   lt  ol gt   lt  body gt    The catch is that this definitely won t work on older or less compliant browsers  display  inline-block is a very new property

User · Answer

The numbers line up better if you add leading-zeroes to the numbers  by setting list-style-type to   ol   list-style-type  decimal-leading-zero

User · Answer

This code makes numbering style same as headers of li content    lt style gt      h4  font-size  18px      ol list-h4  counter-reset  item  padding-left 27px      ol list-h4  gt  li  display  block      ol list-h4  gt  li  before  display  block  position absolute   left 16px   top auto  content  counter item      counter-increment  item  font-size  18px      ol list-h4  gt  li  gt  h4  padding-top 3px   lt  style gt    lt ol class  list-h4  gt       lt li gt           lt h4 gt     lt  h4 gt           lt p gt     lt  p gt        lt  li gt       lt li gt     lt  li gt   lt  ol gt

User · Answer

I suggest playing with the  before attribute and seeing what you can achieve with it  It will mean your code really is limited to nice new browsers  and excludes the  annoyingly large  section of the market still using rubbish old browsers   Something like the following  which forces a fixed with on the items  Yes  I know it s less elegant to have to choose the width yourself  but using CSS for your layout is like undercover police work  however good your motives  it always gets messy   li before     content  counter item          counter-increment  item    display  marker    width  2em      But you re going to have to experiment to find the exact solution

User · Answer

The CSS for styling lists is here  but is basically   li       list-style-type  decimal      list-style-position  inside      However  the specific layout you re after can probably only be achieved by delving into the innards of the layout with something like this  note that I haven t actually tried it    ol   counter-reset  item   li   display  block   li before   content  counter item        counter-increment  item

User · Answer

I will give here the kind of answer i usually don t like to read  but i think that as there are other answers telling you how to achive what you want  it could be nice to rethink if what you are trying to achive is really a good idea   First  you should think if it is a good idea to show the items in a non-standard way  with a separator charater diferent than the provided   I don t know the reasons for that  but let s suppose you have good reasons   The ways propossed here to achive that consist in add content to your markup  mainly trough the CSS  before pseudoclass  This content is really modifing your DOM structure  adding those items to it   When you use standard  ol  numeration  you will have a rendered content in which the  li  text is selectable  but the number preceding it is not selectable  That is  the standard numbering system seems to be more  decoration  than real content  If you add content for numbers using for example those   before  methods  this content will be selectable  and dued to this  performing undesired vopy paste issues  or accesibility issues with screen readers that will read this  new  content in addition to the standard numeration system   Perhaps another approach could be to style the numbers using images  although this alternative will bring its own problems  numbers not shown when images are disabled  text size for number not changing         Anyway  the reason for this answer is not just to propose this  images  alternative  but to make people think in the consequences of trying to change the standard numeration system for ordered lists

User · Answer

Borrowed and improved Marcus Downing s answer   Tested and works in Firefox 3 and Opera 9   Supports multiple lines  too   ol       counter-reset  item      margin-left  0      padding-left  0     li       display  block      margin-left  3 5em              Change with margin-left on li before   Must be -li before  margin-left   li before  padding-right    Causes indention for other lines         li before       content  counter item           Change  item  to  item  upper-roman  or  item  lower-roman  for upper- and lower-case roman  respectively         counter-increment  item      display  inline-block      text-align  right      width  3em                      Must be the maximum width of your list s numbers  including the      for compatability  in case you use a fixed-width font  for example    Will have to beef up if using roman         padding-right  0 5em      margin-left  -3 5em             See li comments

User · Answer

HTML5  Use the value attribute  no CSS needed   Modern browsers will interpret the value attribute and will display it as you expect  See MDN documentation    x000D   x000D   lt ol gt  x000D     lt li value  3  gt This is item three  lt  li gt  x000D     lt li value  50  gt This is item fifty  lt  li gt  x000D     lt li value  100  gt This is item one hundred  lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    Also have a look at the  lt ol gt  article on MDN  especially the documentation for the start and attribute

User · Answer

You can also specify your own numbers in the HTML - e g  if the numbers are being provided by a database    x000D   x000D  ol   x000D    list-style  none  x000D    x000D   x000D  ol gt li before   x000D    content  attr seq        x000D    x000D   lt ol gt  x000D     lt li seq  1  gt Item one lt  li gt  x000D     lt li seq  20  gt Item twenty lt  li gt  x000D     lt li seq  300  gt Item three hundred lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    The seq attribute is made visible using a method similar to that given in other answers  But instead of using content  counter foo   we use content  attr seq    Demo in CodePen with more styling

User · Answer

This is the solution I have working in Firefox 3  Opera and Google Chrome  The list still displays in IE7  but without the close bracket and left align numbers     x000D   x000D  ol   x000D    counter-reset  item  x000D    margin-left  0  x000D    padding-left  0  x000D    x000D  li   x000D    display  block  x000D    margin-bottom   5em  x000D    margin-left  2em  x000D    x000D  li  before   x000D    display  inline-block  x000D    content  counter item        x000D    counter-increment  item  x000D    width  2em  x000D    margin-left  -2em  x000D    x000D   lt ol gt  x000D     lt li gt One lt  li gt  x000D     lt li gt Two lt  li gt  x000D     lt li gt Three lt  li gt  x000D     lt li gt Four lt  li gt  x000D     lt li gt Five lt  li gt  x000D     lt li gt Six lt  li gt  x000D     lt li gt Seven lt  li gt  x000D     lt li gt Eight lt  li gt  x000D     lt li gt Nine lt br gt Items lt  li gt  x000D     lt li gt Ten lt br gt Items lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D    EDIT  Included multiple line fix by strager     Also is there a CSS solution to change from numbers to alphabetic roman lists instead of using the type attribute on the ol element    Refer to list-style-type CSS property  Or when using counters the second argument accepts a list-style-type value  For example the following will use upper roman   li  before     content  counter item  upper-roman          counter-increment  item

[html] How can you customize the numbers in an ordered list?

Examples related to html

Examples related to css

Examples related to html-lists

Examples related to roman-numerals