Css 自定义计数器排序列表对齐问题

我有一个简单的有序列表。我使用计数器重置属性来更改数字的样式。但问题是当容器（

.list

）宽度很小时，列表不会像有序列表那样直接对齐

.list{
边框：1px纯黑；
宽度：40%；
框大小：边框框；
}
ol{
列表样式：无；
计数器复位：CSSCONTER；
左侧填充：0.5雷姆；
}
李{
反增量：CSC中心；
边缘底部：0.25雷姆；
}
李：以前{
内容：计数器（CSSCONTER）；
背景：灰色；
宽度：1.5雷姆；
高度：1.5雷姆；
边界半径：100%；
显示：内联块；
线高：1.5雷姆；
文本对齐：居中；
颜色：白色；
保证金权利：0.5雷姆；
}

输入您的手机号码以查看您的藏书


选择要添加到收藏中的书籍


确认并提交

编辑以避免重复答案

您还可以使用、

填充和背景：

可能的例子


.list{
边框：1px纯黑；
宽度：250px；
框大小：边框框；
}
：：标记{颜色：#ddd；}
李{
列表样式位置：内部；
文本缩进：-1.5em；
填充：0.3em 0.2em 2em；
背景：径向梯度(
在0.8em和0.9em处旋转，
灰色0.6em，
西红柿，
透明0.75em
);
}


输入您的手机号码以查看您的藏书


选择要添加到收藏中的书籍


确认并提交

该
具有不同的填充物


问题是您引入了：：before伪元素。你必须返工你的填充物和边距


.list{
边框：1px纯黑；
宽度：40%；
框大小：边框框；
}
ol{
列表样式：无；
计数器复位：CSSCONTER；
左：2rem；
-webkit框大小：边框框；
框大小：边框框；
}
李{
反增量：CSC中心；
边缘底部：0.25雷姆；
}
李：以前{
内容：计数器（CSSCONTER）；
背景：灰色；
宽度：1.5雷姆；
高度：1.5雷姆；
边界半径：100%；
显示：内联块；
线高：1.5雷姆；
文本对齐：居中；
颜色：白色；
左边距：-1.75雷姆；
}


输入您的手机号码以查看您的藏书


选择要添加到收藏中的书籍


确认并提交

好的。感谢您的解释只是一个想法：如果您想为
li:：before
设置
width:2rem
和
margin left:2rem
（与
ol
的
padding left:2rem
相同，你会得到一个更好的居中项目，而不是尝试使用
width:1.5rem
和
margin left:-1.75rem
将其向左拉吗？“问题”（实际上不是问题）你使用的是一个伪元素。浏览器理解该元素的方式与理解你的字符的方式相同。负边距实际上将整行向右推。下面看一看-