CSS：有序列表中编号的垂直位置

关于有序列表中编号的垂直位置的问题： 如果

元素仅包含浮动div，则将数字推送到基线。有什么办法防止这种情况发生吗？我希望数字在顶部对齐

这是小提琴：

ol{
边缘：0.2米；
列表样式：外小数；
}
li{
边缘底部：0.25em；
边框：1px纯红；
}
李：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
div{
浮动：左；
高度：3em；
背景：浅灰色；
}

12


12345

列表样式在CSS中非常有限。使用

列表样式位置

时，只能使用

内部

或

外部

，不能对其进行样式设置。绕过此问题的一种方法是使用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;
}

---

工作示例：

检查此链接。首先为什么要使用浮动？原因是，我用于将页面转换为pdf的库。CSS支持非常有限，或者我应该说是“老派”。因此，我必须使用浮点数和列表编号（而不是css计数器）。@xenio gracias感谢您的链接，但这似乎是另一个主题，因为没有涉及浮点数。您可以直接将计数器作为真正的子元素插入（如果不想硬编码，可以通过一点JavaScript），同时浮动它们——只要div内容放在同一行上（如果它断开到下一行，又会有麻烦）。如果库理解

表

显示类型，这可能是避免这种情况的一种选择（与

垂直对齐

结合使用）如果这不起作用或者还不够，那么也许是时候寻找一个更好的PDF创建库了…谢谢！那很好用。但是很抱歉，我应该提到我不能使用CSS计数器，因为页面将被转换为不支持计数器的pdf。更新了我的问题。