CODEWITHSUNDEEP
htmlcsshtml-lists
PBG
PBG

Reputation: 9684

Aligning numbers inside an HTML Ordered List

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>

Upvotes: 16

Views: 25914

Answers (3)

jamesplease
jamesplease

Reputation: 12879

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>

Upvotes: 2

Mircea Sandu
Mircea Sandu

Reputation: 926

You shoud use: 

list-style: decimal inside none;

Upvotes: 30

Shrey Gupta
Shrey Gupta

Reputation: 5617

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

Upvotes: 1

Related Questions