Css 如何将列表项和列表内容与空间对齐？

我想创建一个具有如下所示样式的订单列表：

我已经用下面的代码尝试了一些方法：

body {
    padding: 20px;
}

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
}
ol li {
    position: relative;
}
ol li span {
    position: absolute;
    left: 30px;
}

它看起来像我想要的款式。但是，当内容换行时，它将一起折叠：

有办法解决吗

这是我用来演示的链接：

---

尝试

列表样式位置：内部


正文{
填充：20px；
}
ol{
列表样式类型：上罗马；
列表样式位置：内部；
}
欧利{
位置：相对位置；
列表样式位置：外部；
左侧填充：5px；
}
欧利斯潘{
位置：相对位置；
}

我的同僚们都是精英。奎拉特，例外
我的同僚们都是精英。驱除公积金吗？莫迪？劳丹蒂姆·维勒·梅奥雷斯消费？

我的同僚们都是精英。天然照明是非动物性的吗
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。最大限度地消耗能量，选择时间。阿迪皮西自由党
我的同僚们都是精英。埃尼姆，麦格纳姆
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。帕瑞特，奎
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。自由选择权。

使用
div
代替
span
，并像下面那样更改css


正文{
填充：20px；
}
ol{
列表样式类型：上罗马；
列表样式位置：内部；
显示：首字母；
}
大理分区{
左侧填充：40px；
利润上限：-19px；
}

我的同僚们都是精英。奎拉特，例外
我的同僚们都是精英。驱除公积金吗？莫迪？劳丹蒂姆·维勒·梅奥雷斯消费？

我的同僚们都是精英。天然照明是非动物性的吗
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。最大限度地消耗能量，选择时间。阿迪皮西自由党
我的同僚们都是精英。埃尼姆，麦格纳姆
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。帕瑞特，奎
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。自由选择权。

CSS自定义：
我建议使用专用CSS来实现这一点，因为它是专门为这些情况而设计的，在这些情况下，您需要一个定制的计数器

此外，正如您所看到的，HTML更简单，并且不需要在每个
li
项中进行任何包装


ol{
计数器复位：列表；
列表样式：无；
}
欧利{
位置：相对位置；
左侧填充：40px；
}
奥利：以前{
位置：绝对位置；
左：0；
计数器增量：列表；
内容：计数器（列表，上罗马字母）'；
}

我的同僚们都是精英。奎拉特，例外
我的同僚们都是精英。驱除公积金吗？莫迪？劳丹蒂姆·维勒·梅奥雷斯消费
我的同僚们都是精英。天然照明是非动物性的吗
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。最大限度地消耗能量，选择时间。阿迪皮西自由党
我的同僚们都是精英。埃尼姆，麦格纳姆
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。帕瑞特，奎
洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。自由选择权
参考愿意使用javascript吗？@ChrisHappy javascript也愿意。然而，我认为这是一种观点。因此，纯CSS（如果可以达到目的）更可取。“列表样式位置：外部；”in ol li将使列表项在右侧对齐，而不是在左侧对齐。在注释掉“列表样式位置：outside；”之后，我不知道如何在列表项和列表内容之间添加空格。