3

我在这个线程中描述了我原来的问题。
简而言之，当在 UL 中使用自定义计数器时，文本缩进会中断。
Marc Audet提出了一个非常优雅的解决方案，我在我们的代码中实现了它。

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

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

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

所以。有没有办法解决这个问题，或者我必须通过告诉他这在技术上是不可能的来让我的客户不高兴？

再次感谢您花时间回答。

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

4

2 回答 2

2

我重新审视了我之前的解决方案，并对 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/

于 2013-06-03T18:18:01.803 回答
0

我猜从您发布的 CSSdesk 中您希望缩进类似于底部面板中显示的内容。

首先，您希望数字不在文本中。您可以通过设置与宽度匹配的 margin-left 来获得它：

ol.wrong li:before {
    ....
    width: 20px;
    margin-left: -20px
}

ol.wrong ol li:before {
    width: 40px;
    margin-left: -40px;
}

由于剩余边距与宽度相同，因此不占用空间。

并且，要调整全局位置，请设置：

ol.wrong ol li {
    margin-left:15px;
}

在您的原始代码中，这是margin-right。我会说这是一个错误，调整边距似乎没有意义

于 2013-06-03T16:56:01.030 回答