Search code examples
csscss-paged-mediaantenna-house

How to finetune the position of a list bullet/number

I've made a list in HTML:

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

When I render this in Antennahouse Formatter, this is the result:
enter image description here

I can change the indentation of the text in CSS:

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

padding-left is the distance indicated by the dark blue line. But I'd like to change the position of the number: it's centered in that 6.3 mm wide space now, and I want to align it to the left side of that space (move the number to the spot indicated by the red line).

The text-indent and margin-left do not influence this position. The only property I can find that influences the position of the number is list-style-position, but that only has values inside and outside.

Is there a way to change the position of this number?

I've tried various permutations of this: 

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

but that has no effect on the autogenerated number.

Solution

  • I have tried one solution for this

    We have below default css property for ol element

      padding-inline-start: 40px;

    We can override this property as below

     padding-inline-start: 10px;

    Below is the code snippet 

    ol {
  padding-inline-start: 10px;
}

li {
    padding-left: 10px;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}
    <ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

    I hope it will help Thanks...