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计数器，因为该页面将被转换为不支持CSS计数器的PDF文件。

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/