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

【问题标题】：CSS: vertical position of numbering in ordered listCSS：有序列表中编号的垂直位置
【发布时间】：2019-06-29 01:37:12
【问题描述】：

关于有序列表中编号的垂直位置的问题：如果<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。

【问题讨论】：

stackoverflow.com/questions/33644518/…查看此链接。
你为什么首先使用浮点数？
原因是mpdf，我用来将页面转换为pdf的库。 CSS 支持非常有限，或者我应该说“老派”。所以我必须使用浮点数和列表编号（而不是 css 计数器）。
@xenio-gracias 感谢您的链接，但这似乎是一个不同的主题，因为没有涉及浮动。
您可以将计数器直接插入为真正的子元素（如果您不想对它们进行硬编码，可以通过一点 JavaScript），并将它们浮动 - 这也可以所需的结果，只要 div 内容适合在同一行（如果它中断到下一个，它会再次麻烦。）如果库了解 table 显示类型，这可能是避免这种情况的一个选项（结合vertical-align。）如果这不能解决问题或不够，那么也许是时候寻找更好的PDF创建库了……

标签： css list css-float

【解决方案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/

【讨论】：

谢谢！这工作得很好。但是很抱歉，应该提到我不能使用 CSS 计数器，因为页面将被转换为不支持计数器的 pdf。更新了我的问题。