如何响应地设置列表填充/边距

Question

对于标准项目符号列表来说，这并不是很多，但对于罗马数字，数字宽度可以从一个<li>到另一个{{1}}变化很大。

Ex：II vs XVII

我很难为列表设置足够的填充，以便广泛的“子弹”不会被剪裁，并且窄子弹不会无缘无故地缩进。

基本上我正在寻找一种CSS解决方案来实现最小的左侧间距，以便子弹/数字永远不会被剪裁。

Answer 1

您对尴尬缩进的疑虑是有效的。但这是有序列表的本质。 但是你可以通过使用这个css声明来避免剪辑问题。

li {
    list-style-position: inside;
}

此声明应该保留任何内容，但是根据数字的长度，列表项的内容将会更进一步。

Answer 2

不确定这是你要求的一个例子，但试试这个：

li {
    list-style: upper-roman;
    margin: 0 0 0 2em ;
}

将2em更改为您想要的任何内容。 JSfiddle。