CODEWITHSUNDEEP
csscss-paged-mediaantenna-house
Hobbes
Hobbes

Reputation: 2115

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.

Upvotes: 2

Views: 936

Answers (5)

Tony Graham
Tony Graham

Reputation: 8068

Give the ::marker a width and left-align its content:

li::marker {
  text-align: start;
  width: 6.3mm;
}

Upvotes: 1

Shrirang Kadale
Shrirang Kadale

Reputation: 498

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...

Upvotes: 1

Ram Segev
Ram Segev

Reputation: 2571

ol has default padding-left: 40px; see Default CSS Values for HTML Elements

you can easily change the ol padding-left with:

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>

Upvotes: 3

Srishti
Srishti

Reputation: 64

Follow this link, it explains how you can remove the predefined bullet styles and create your own bullet with desired style:

https://www.w3schools.com/howto/howto_css_bullet_color.asp

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Hope this helps, thanks.

Upvotes: 1

Joschi
Joschi

Reputation: 2974

If you set the list-style-position to inside, you can define the red line by the padding-left of the ol. See Example and hover over the list to see the effect, I added a border for visualisation purposes.

ol {
  border: 1px solid black;
  padding-left: 0; /* or whatever*/
}

ol:hover {
  padding-left: 6mm;
}

ol li {
  list-style-position: inside;
}

ol li p {
  padding-left: 6.3mm;
  display: inline-block;
  margin: 0;
}
<ol class="listnumber">
  <li class="listnumber">
    <p class="listnumber">list number</p>
  </li>
</ol>

Upvotes: 1

Related Questions