css - 如何微调列表元素符号/编号的位置

Question

我用 HTML 制作了一个列表:

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>   

当我在 Antennahouse Formatter 中渲染时，结果如下:

我可以在 CSS 中更改文本的缩进:

ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

padding-left 是深蓝色线表示的距离。但我想改变数字的位置:它现在位于那个 6.3 毫米宽的空间的中心，我想将它对齐到那个空间的左侧(将数字移动到红线指示的位置)。

text-indent 和 margin-left 不影响这个位置。我能找到的唯一影响数字位置的属性是 list-style-position，但它只有值 inside 和 outside。

有没有办法改变这个数字的位置？

我试过各种排列组合:

li.listnumber:before {
    text-align: left;
}

但这对自动生成的数字没有影响。

Answer 1

ol 有默认的 padding-left: 40px; 见 Default CSS Values for HTML Elements

您可以轻松地更改 ol padding-left :

ol.listnumber{
   padding-left: 10px;
}

ol.listnumber {
    padding-left: 10px;
}
ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>