Is there any way I can make an ordered list look like in my example below

I would like to make an ordered list with HTML that looks like this:

2.1 tesa
2.2 tesbasdfasd
2.3 asfdasd
2.4 sdfsd

Is it possible to do this? I really want to use ol and a li because I like the way it gives s开发者_如何学Pythonpace for the numbers if there's more than one line.

One way to do it with CSS:

HTML:

<ol id="myList">
    <li>tesa</li>
    <li>tesbasdfasd</li>
    <li>asfdasd</li>
    <li>sdfsd</li>
<ol>

CSS:

#myList {
    list-style: decimal inside none;
    margin-left: 2em;
}
#myList li:before {
    content: "2.";
    float: left;
}

See it at jsFiddle.

This should work on all late-model browsers. Compatibility table.

I think this might do the trick for you: https://developer.mozilla.org/en/CSS_Counters

This is the best i can come up with (all modern and IE8+ browser support)

ol{
    counter-reset:list;
    list-style-type:none;
    padding:0;
    margin:0;
}
ol li{
    counter-increment:list;
    position:relative;
    padding-left:3em;
}

ol li:before{
    width:2em;
    position:absolute;
    left:0;
    text-align:right;
}
/*add one of the following classes to the <ol> to define the prefix*/
ol.prefix-1 li:before{
    content: '1.' counter(list);
}
ol.prefix-2 li:before{
    content: '2.' counter(list);
}

Demo at http://jsfiddle.net/gaby/rmCJC/1

It will render as