CODEWITHSUNDEEP
jqueryhtmlcss
Rene
Rene

Reputation: 93

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 space for the numbers if there's more than one line.

Upvotes: 3

Views: 97

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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

enter image description here

Upvotes: 1

Elad Lachmi
Elad Lachmi

Reputation: 10561

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

Upvotes: 2

Brock Adams
Brock Adams

Reputation: 93473

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.

Upvotes: 4

Related Questions