Как добавить цвет фона для элементов в списке

Question

У меня есть заказанный список

<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>

Чтобы выглядеть примерно так:

1. Lorem Ipsum Dolor Sit Amet, Concetetur Adipisicing Elit, Sed Do EiusMod Tempor Incididunt U Labore et Dolore Magna Aliqua Ut enim ad minim veniam, quis
2. Еще немного текста

Я хочу, чтобы у списка была позиция в списке: снаружи, чтобы числа выходили за пределы (как они делают на этой странице), но фон каждого элемента списка (который чередуется) также покрывал числа.

Answer 1

Как следует из "внешнего" имени, числа располагаются вне элемента, поэтому вы не можете повлиять на них с помощью цвета фона li. Обходным путем для этого может быть использование дополнительного div внутри li:

<ol>
<li><div>Lorem ipsum dolor sit amet, consectetur ...</div></li>
<li><div>Some more text ...</div></li>
</ol>

Затем добавьте следующий CSS для div:

ol li div  {
  width: 100%;
  height: 100%;
  background-color: #FFAAAA;
  margin-left: -20px;
  padding-left: 20px;
}

Это переместит div, чтобы появиться под номером (это значение -20px) и текст в нем обратно в нужное место (это значение 20px).

Answer 2

Один из вариантов: text-indent, например,

li {
    list-style-position: inside;
    text-indent: -1em;
    padding: 10px 2em;
    background-color: lime;
}
li.odd {
    background-color: aqua;
}

. Я использовал отрицательный отступ для текста, чтобы вытащить первую строку текста, а затем левый отступ, чтобы вернуть все в выравнивание.,Возможно, вам придется немного поиграть с отступами текста и отступами.Я проверял это только с элементами списка с однозначными числами.

Answer 3

вместо использования outside, можете ли вы использовать list-position: inside, установить фон, а затем использовать отрицательное левое поле для его выталкивания?

Answer 4

Вот часть вашего тела

<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>

и вот часть CSS

li.odd{
    background-color: #FF851B;
}
li.even{
    background-color: #FF4136;
}

Answer 5

display: block;

Вот кодекс, демонстрирующий, как стилизовать элементы списка: http://codepen.io/anon/pen/qdwGXa