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

Question

这对于标准项目符号列表来说并不多，但对于罗马数字，数字宽度可能会因一个而异<li>。

例如：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。