Блог

Есть ли способ использовать класс ol для создания выходных данных, например, в формате викторины.

1. Привет
2. B До свидания
3. C Увидимся
4. D Отлично

Я могу выводить одно или другое, но не вместе. Я понимаю, что вы не можете использовать два ol-класса…

 <style>
    ol.o {
        list-style-type: upper-alpha;
    }
    li {
        list-style-type: decimal;
    }
</style>

 <ol class="o">
                  
                        <li>@QuizItem.Option1</li>
                        <li>@QuizItem.Option2</li>
                        <li>@QuizItem.Option3</li>
                        @if (QuizItem.Option4 != null)
                        {
                            <li>@QuizItem.Option4</li>
                        }
                        @if (QuizItem.Option5 != null)
                        {
                            <li>@QuizItem.Option5</li>
                        }
                  
                    </ol>
 

Как я могу этого добиться?

С помощью CSS-счетчиков

 ol {
  counter-reset: listStyle;
}

ol li {
  margin-left: 1em;
  counter-increment: listStyle;
}

ol li::before {
  margin-right: 1em;
  content: counter(listStyle, upper-alpha);
} 

 <ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ol>