Html CSS |列表项上方单个垂直列中的有序列表

我希望创建一个有序列表（十进制），其中所有项目都与数字标题对齐。例如：

名单

一,

这是清单项目1

二,

这是清单项目2

三,

这是清单项目3

---

我一直在四处寻找，但没有找到任何方法来实现这一点。我仍然想使用，因为它的规模比手动输入数字更好。是否有任何方法可以作为单个列来处理和列出

正如@Imgonzalves所指出的--

HTML

---

在这里包括他的笔：

您可以在每个

li

元素之前创建一个空块元素，这样您就可以实现

li

内容位于新行的效果，而无需在每个列表项的开头键入

。

li{
浮动：左；
明确：两者皆有；
}
li:在{content:''；display:block；}之前

列表项
列表项
列表项
列表项

瞧，CSS计数器！我在CSS中添加了注释来解释解决方案。在解释细节方面做得很好

。花式列表{
保证金：0；
填充：0；
列表样式：无；/*隐藏原始列表编号*/
计数器重置：有序列表；/*初始化CSS计数器*/
}
李先生{
边缘底部：12px；
}
李：以前{
显示：块；/*将编号显示为块以强制内容向下*/
利润底部：4倍；
计数器递增：有序列表；/*递增列表中每个
的CSS计数器*/
内容：计数器（有序列表）“.；/*输出计数器值并附加一个”*/
}

此解决方案具有以下好处：

不需要多余的HTML
维护有序列表的语义
灵活,；不管你有多少东西
如果更改列表的左边距，则不需要调整列表项的左边距
项目
项目
项目
项目
项目

请提供fiddle链接，它将很容易回答您的问题。这对你来说够好了吗？@Crabolo，我通常会包含代码片段，但在这种情况下，我无法远程让它按预期运行，所以我希望一个“图表”就足够了。包含的代码最多只能是一个带有填充和边距重置的列表（不是很有帮助）。这将使用2列进行渲染：

的一对一。我正在寻找一个单一的解决方案。

<ol>
    <li><span>list item</span></li>
    <li><span>list item</span></li>
    <li><span>list item</span></li>
</ol>

ol li span {
    position: relative;
    left: -20px;
    display:block;
}