c# - 使用在同一行上产生字母和数字
问题描述
有没有办法使用 ol 类产生输出,如下面的测验格式。
- 你好
- 再见
- 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>
推荐阅读
- c++ - 在 xaudio2 中集成 3D 音频
- swift - 如何在swiftUI中使用分页选项卡视图时阻止页面向上和向下滚动
- node.js - 从自定义 npm 包调用脚本
- vue.js - 从 vue js 中的计算属性加载复选框,但无法从 vue js 中的 v-model 保存数组
- google-chrome - 关闭 chrome 更改密码弹出窗口
- discord.py - Discord py 在嵌入消息中发送随机整数
- javascript - 我在 Gulp 上遇到了麻烦。当我运行它时,网站会显示“”
- c# - 我试图在与我的玩家碰撞后破坏一个游戏对象,然后重新实例化它以再次碰撞它,形成一个循环,但它不起作用
- c++ - 我可以使用正常的最小堆方法来解决“合并 k 排序数组”吗
- python - FIFA 2021 查询 API 以获取比赛统计信息