Mode 0


I am trying to emulate an ordered list using a paragph tags because it uses a non-english sequence not supported by OL. The P tag is defined as

.listp {
.listgap {margin-right:9pt;}

this is the html code in the doc.

<p class=listp><span class=listgap>5.</span>List Item text</p>

The list item number is placed in the text indent of the para inside a span with the right margin set to create a gap so the beginning of the first line aligns with the rest of the paragraph body.

My question is that how can I keep the gap automatically adjusted so that it keeps the beginning of the para aligned to the body even if the font size of of the para changes or if the numbers go into double or triple digits.


  • hey @modeI cleaned up the code formatting in your question and removed your answer (which youd then asked as a comment). HTH Oli Studholme almost 8 years ago

1 answer

This was chosen as the best answer

This is tested in Firefox 3, IE7, Chrome and Opera 10:

 <style type="text/css">
  .listview {margin-left: 5em; width: 20em;}
  .listview span {display:block; float:left; margin-left: -5em;}
 <p class="listview"><span>5.</span>Here is some text which should be long enough to span several lines. Quardle oodle ardle wardle doodle, the magpies said.</p>

Note that I've used ems rather than pt since ems grow with the user's font size, reducing the likelihood of text overlapping. (pt is really only meaningful on a print stylesheet).

Answered almost 8 years ago by Richard Grevers
  • Hi Richard, Thank you for the comment. Using ems is a good idea and solves the scaling problem. Is it possible to do this without making the span inside the para a block element? Mode almost 8 years ago
  • Yes, it should work and it seems to. (Tested in Opera only) - Floating any element automatically confers block status on it, but I was crossing my i's and dotting my t's :-) Richard Grevers almost 8 years ago
  • Thank you Richard Mode almost 8 years ago