css нумерованный список

Простейший вариант (не советую):

CSS:

ol.ugu {

    margin: 80px;

    list-style: decimal inside;

}



ol.ugu li {

    background: url(http://cdn1.iconfinder.com/data/icons/gnomeicontheme/24x24/stock/image/stock_draw-circle.png) no-repeat;

    padding-left: 7px;

    height:30px;

    line-height:24px;

    margin-bottom:10px;

}​

HTML:

<ol class="ugu">

            <li>Раз</li>

            <li>Два</li>

            <li>Три</li>

</ol>​

Результат:

Вживую: http://jsfiddle.net/b96u9/1/

Продвинутый вариант:

CSS:

ol {

    list-style: none;

    background: #ccc;

    counter-reset: numList;

    margin: 100px;

}

ol li {

    margin-right: 50px;

    float: left;

    position: relative

}

ol li:before {

    counter-increment: numList;

    content: counter(numList); 

    float: left;

    position: absolute;

    left: -25px;

    

    font-weight: bolder;

    font-size: 12px;

    font-family: Arial;

    text-align: center;

    color: #fff;

    line-height: 18px;

    

    width: 18px;

    height: 18px;

    background: #0a65a5;

    -webkit-border-radius: 300px;

    -moz-border-radius: 300px;

    border-radius: 300px;

}​

HTML:

<ol>

    <li>Раз</li>

    <li>Два</li>

    <li>Три</li>

</ol>​

Результат:

Вживую: http://jsfiddle.net/MZShw/1/

FernandoDiaz, как сделать в продвинутом варианте, чтобы цифры были не в строку, а друг под другом?

float: left; надо убрать у ol li