Список заказов - фоновое изображение для включения десятичного списка

Question

Я работаю над упорядоченным списком. С фоновым изображением на нем. То, что я хотел бы сделать, это иметь число «1», «2» и т. Д. Сидя в верхней части фонового изображения. С подходящим отступом между изображением и элементами списка.

Пример моей работы: Здесь

Спасибо за это.

Приветствия

Answer 1

напишите list-style: decimal inside; в вашем css и настройте ваш отступ. Проверьте это:

http://jsfiddle.net/KnMhS/2/

Answer 2

Вот небольшая скрипка, использующая счетчик CSS и: перед магией: http://jsfiddle.net/KnMhS/7/

ol.what_list {
    margin-left: 0;
    padding-left: 0;
    margin-top: 80px;
    list-style: none;
    counter-reset:item;
}

ol.what_list li {
    padding-left: 0px;
    margin-left:30px;
    min-height: 35px;
    counter-increment:item
}

ol.what_list li:before {
    content: counter(item);
    display: inline-block;
    background: url(http://i44.tinypic.com/9ihj4m.png) no-repeat  center center;
    width: 30px;
    height: 31px;
    margin-left: -30px;

    text-align: center;
    line-height: 31px;  
    color: white;
}

Answer 3

Просто поместите list-style-position: inside; на элемент css ul.what_list

показано здесь -> http://jsfiddle.net/KnMhS/1/

Чтобы можно было менять цвет пули. Вы не можете просто сделать пулю. То, что вы можете сделать, это настроить цвет от li до белого. Затем создайте span с классом, скажем, color и раскрасьте этот элемент в черный цвет. смотрите здесь -> http://jsfiddle.net/KnMhS/4/

Answer 4

То, что я написал, может пригодиться вам http://csswizardry.com/2010/11/mark-up-a-semantic-accessible-progressively-enhanced-mobile-optimised-progress-bar-bonus-style-the-numbers-in-an-ordered-list/#section-numbers

H