HTML-код заказанного по заказу

Question

в формате HTML/CSS, возможно ли иметь упорядоченный список в следующем формате?

o. Item 1 
    i. Item 2 
ii. Item 3 
iii. Item 4 

В целом, возможно ли создать собственный формат для упорядоченных списков?

Answer 1

Конечно, вы можете использовать тег <ol> для римских цифр, просто добавив тип.

<ol type="i"> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ol> 

Этот HTML выплевывает:

i. Coffee 
ii. Tea 
iii. Milk 

Более подробную информацию можно найти здесь: http://www.w3schools.com/tags/att_ol_type.asp

Для вас o будучи первый элемент позиции, начните отсчет на втором пункте и предварять сначала используя Javascript или jQuery.

Answer 2

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

Таким образом, ваш список HTML просто:

<ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ol> 

Следующая CSS делает фактическую магию. Однако (незначительный недостаток), я считаю, что вам необходимо установить ширину псевдоэлемента :before явно, чтобы похож на внешний вид «обычного» списка.

ol { 
    list-style-type: none; 
} 

li { 
    counter-increment: strangecounter; 
} 

li:before { 
    content: counter(strangecounter, lower-roman) ". "; 
    display: inline-block; 
    width: 2em; 
    text-align: right; 
    margin-right: 0.5em; 
} 

ol :first-child { 
    counter-reset: strangecounter -1; 
} 

ol :first-child:before { 
    content: "o. "; 
}