再次：CSS，UL / OL：使用自定义计数器不正确缩进 [英] Again: CSS, UL/OL: Incorrect indent with custom counter

问题描述

我在此主题中说明了我的原始问题。

简而言之，在UL中使用自定义计数器时，文本缩进打破了。

Marc Audet 提出了一个非常优雅的解决方案，我在我们的代码中实现。

现在 - 不奇怪的是，如果列表应该是float周围的图片： - （

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

数字位于图像顶部
再次：毫无疑问，

所以。
有没有办法解决这个问题，或者我不得不让我的客户不满意，告诉他在技术上不可能？

再次感谢您花时间回答。

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

解决方案

我重温了以前的解决方案，并对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_level2，decimal）。 
 counter-increment：counter_level2; 
} 
  

基本上，我删除了绝对定位的伪元素，浮动内容。

但是，由于伪元素的负边距，标签仍然可以与浮动图像重叠，因此添加 overflow ：hidden 到顶层 li 样式，这将创建一个新的块格式化上下文来处理重叠问题。

下面：根据你的内容和浮动的图片，你可以得到一些大块的白色空间，如我的新演示：

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

I described my original problem in this thread.
In short, when using custom counters in ULs, the text indentation broke.
Marc Audet proposed a very elegant solution which I implemented in our code.

Now - not surprising - this does not work if the list is supposed to float around images :-(

You can see the problem here: http://cssdesk.com/eEvwn

The numbers are lying on top of the image. Again: no surprise, they are absolutely positioned after all.

So. Is there a way to fix this, or do I have to make my client unhappy by telling him it's technically not possible?

Thank you again for taking the time to answer.

If you need more info, please let me know.

解决方案

I revisited my previous solution and made some modifications to the CSS as follows.

For the top-level list:

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;
}

and for the nested list:

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;
}

Essentially, I removed the absolutely positioned pseudo-elements since those will not work near floated content.

However, because of the negative-margin for the pseudo-elements, the labels could still overlap the floated images, so add overflow: hidden to the top level li style and this creates a new block formatting context which takes care of the over lap issue.

Downside: depending on your content and the floated image, you can get some large chunks of white space as shown in my new demo:

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

这篇关于再次：CSS，UL / OL：使用自定义计数器不正确缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！