Aligning numbers inside an HTML Ordered List

Question

I am trying to create an ordered numbered list where the background color alternates. I need the numbers to appear inside the background, as well as line up. If I take out list-style-position:inside; the numbers line up, but move outside the background.

Here's my code, with a link to jsfiddle below.

https://jsfiddle.net/kwgpf/

ol { list-style-type: decimal; list-style-position: inside; margin: 1.5em; } .alt { background-color: #ccc; }

<ol> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> </ol>

Mircea Sandu · Accepted Answer · 2013-03-25 06:57:15Z

30

You shoud use:

list-style: decimal inside none;

answered Mar 25, 2013 at 6:57

Mircea Sandu

9267 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Over a year ago

the full property (no shorthand) for anyone wondering (for just the positioning) is list-style-position: inside

davidhartman00 Over a year ago

You can read more about styling lists here: developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/… And you can read about the specific CSS here: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

mplungjan · Accepted Answer · 2023-03-25 06:16:10Z

This is the best I can come up with right now. It's a bit hacky, but it gets the job done on modern browsers.

View on JSFiddle

ol { list-style-type: decimal; margin-left: 50px; } .alt { background-color: #ccc; position: relative; } .alt::before { position: absolute; display: inline-block; content: ""; background-color: rgba(0, 0, 0, .2); left: -30px; height: 100%; width: 30px; }

<ol> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> <li class="alt">ha HA ha HA!</li> <li>ha HA ha HA!</li> </ol>

Shrey Gupta · Accepted Answer · 2012-12-27 18:59:32Z

You could just add a margin before each bullet below #10, if you're willing to go the fixed widths route.

Collectives™ on Stack Overflow

Aligning numbers inside an HTML Ordered List

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related