CSS: вертикальная позиция нумерации в упорядоченном списке

Question

Вопрос относительно вертикальной позиции нумерации в упорядоченном списке: числа сдвигаются к базовой линии, если элементы <li> содержат только плавающие элементы div.Есть ли способ предотвратить это?Я хочу, чтобы числа выравнивались сверху.

Вот скрипка:

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>

Спасибо!

РЕДАКТИРОВАТЬ: Я не могу использовать счетчики CSS, потому что страница должна быть преобразована в PDF, которыене поддерживает счетчики css.

Answer 1

Стиль списка довольно ограничен в CSS.С list-style-position вы можете использовать только inside или outside и не можете их стилизовать.Один из способов обойти это - использовать счетчики CSS.

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;
}

Рабочий пример: https://jsfiddle.net/zxar91jf/