CSS: vertical position of numbering in ordered list

Question

A question regarding the vertical position of numbering in an ordered list: numbers are pushed to the baseline if <li> elements only contain floated divs. Any way to prevent this? I want the numbers aligning at the top.

Here's the fiddle:

ol { 
  margin: 0 2em;
  list-style: decimal outside; 
}

li { 
  margin-bottom: 0.25em;
  border: 1px solid red;
}

li::after {
  content: '';
  display: table;
  clear: both;
}

div { 
  float: left; 
  height: 3em;
  background: lightgrey;
}

<ol>
  <li>
    <div>one two</div>
  </li>
  <li>
    <div>one two three four five</div>
  </li>
</ol>

Thanks!

EDIT: I can't use css counters because the page shall be converted to pdfs which don't support css counters.

https://stackoverflow.com/questions/33644518/how-to-vertically-align-numbers-of-ol check this link. — Xenio Gracias, Feb 05 '19 at 09:24
The reason is [mpdf](https://mpdf.github.io/), the library I use to convert pages to pdf. CSS support is pretty limited, or shall I say "old school". So I'm bound to floats and list numbering (instead of css counters). — george, Feb 05 '19 at 09:38
@xenio-gracias thanks for the link but that seems to be a different topic as there are no floats involved. — george, Feb 05 '19 at 09:42
Still doesn’t necessarily mean that floating is the only thing that works, I assume? What if you remove the float, and add `display: inline-block;` instead (to make the divs still only take the width their content demands) …? — 04FS, Feb 05 '19 at 09:56
@04FS `inline-block` would be a nice option but when converting to a pdf, all elements are displayed as blocks and not inline. — george, Feb 05 '19 at 11:02
You could insert the counters directly as real child elements (maybe via a little JavaScript, if you don’t want to have to hard-code them), and float them as well - that would also give the desired result, as long as the div content fits on the same line (if it breaks to the next, it’s gonna be trouble again.) If the library understand the `table` display types, that could be an option to avoid that (in combination with `vertical-align`.) If that doesn’t do the trick or is not sufficient either, then maybe it’s time to look for a better PDF creation library … — 04FS, Feb 05 '19 at 11:13
@04FS Yes! This seems to be practical solution: web view will get an elegant and slim css counter and pdfs - as they can have their own html templates - will get an extra div containing a number for each list item. Just tested a hardcoded soution which works great. Now I just have to figure out the javascript counter to make it dynamic. — george, Feb 05 '19 at 12:57

score 3 · Answer 1 · answered Feb 05 '19 at 09:24

List styling is quite limited in CSS. With list-style-position you can only use inside or outside and you cannot style them. One way to bypass this, is to use CSS counters.

ol { 
  list-style: none; /* removes the current list numbers */
  counter-reset: list; /* creates a new counter */
}

li { 
  position: relative; /* make relative, so we can position the number absolutely */
}

li:before {
  counter-increment: list; /* increment the counter by 1 */
  content: counter(list)'.'; /* output the counter, with a dot at the end */
  position: absolute; /* the rest is positioning and styling */
  right: 100%;
  margin-right: 5px;
  top: 0;
}

Working example: https://jsfiddle.net/zxar91jf/

Thanks! That works perfectly fine. But sorry, should have mentioned that I can't use CSS counters because the page shall be converted to a pdf which does not support counters. Updated my question. — george, Feb 05 '19 at 09:27

CSS: vertical position of numbering in ordered list

1 Answers1