css - 再次:CSS，UL/OL:自定义计数器的缩进不正确

我在this thread中描述了我最初的问题。
简而言之，在UL中使用自定义计数器时，文本缩进中断了。
Marc Audet提出了一个非常优雅的解决方案，该解决方案在我的代码中实现。

现在-不足为奇-如果列表应该在图像周围浮动，则此方法不起作用:-(

您可以在这里看到问题：http://cssdesk.com/eEvwn

这些数字位于图像的顶部。
再次：毫不奇怪，它们毕竟是绝对定位的。

所以。
有什么办法可以解决此问题，还是我必须告诉客户这在技术上是不可能的，从而使我的客户不满意？

再次感谢您抽出宝贵的时间回答。

如果您需要更多信息，请告诉我。

最佳答案

我回顾了以前的解决方案，并对CSS进行了如下修改。

对于顶级列表：

ol.custom {
    margin-left: 0;
    padding-left: 0px;
    counter-reset: counter_level1;
    list-style: none outside none;
    display: block;
    line-height: 18px;
    width: 500px;
}
ol.custom li {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 20px;
    outline: 1px dotted blue;
    overflow: hidden;
}
ol.custom li:before {
    display: inline-block;
    width: 20px;
    margin-left: -20px;
    content: counter(counter_level1)". ";
    counter-increment: counter_level1;
    font-weight: bold;
}

对于嵌套列表：

ol.custom ol {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    counter-reset: counter_level2;
}
ol.custom ol li {
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 40px;
}
ol.custom ol li:before {
    display: inline-block;
    width: 40px;
    margin-left: -40px;
    content: counter(counter_level1, decimal)"." counter(counter_level2, decimal)". ";
    counter-increment: counter_level2;
}

本质上，我删除了绝对定位的伪元素，因为它们在浮动内容附近不起作用。

但是，由于伪元素的负边距，标签仍可能与浮动图像重叠，因此将overflow: hidden添加到顶级li样式中，这将创建一个新的块格式化上下文，该上下文将圈问题。

缺点：根据您的内容和浮动图像，您可以得到一些大的空白区域，如我的新演示所示：

http://jsfiddle.net/audetwebdesign/buXKy/

关于css - 再次:CSS，UL/OL:自定义计数器的缩进不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16896003/