如何解决使用 <ol class> 在同一行产生字母和数字
- 你好
- 再见
- C 见
- 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。