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

问题描述

更新：这个问题已经找到一个非常令人满意的解决方案，但在生产的副作用弹出，我在 this thread 。

Update: this problem has found a very satisfactory solution, but in production side effects popped up which I describe in this thread.

所以，我在我的OL中使用自定义计数器来获得编号，如1 - 1.1 - 1.1.1

可以正常工作。

So, I'm using a custom counter in my OLs to get numbering like "1 - 1.1 - 1.1.1"
Works fine.

但是当我这样做时，LI的缩进是错误的。文本与数字的左边缘对齐，而不是与右边缘对齐（像标准OL一样）。

编辑：为了按照我想要的方式布局数字，我不得不使用OL的标准填充/边距。

现在文本与数字的左边缘对齐，而不是与右边缘对齐（像标准OL一样）。

But when I do this, the indentation of the LI is wrong. The text aligns with the left edge of the number, not with the right edge (like standard OLs do).
To get the numbers layouted the way I want, I had to mess with the standard paddings/margins of the OL.
Now the text aligns with the left edge of the number, not with the right edge (like standard OLs do).

我尝试了很多东西，但是我似乎无法控制LI内容的左边缘。

此外，这个功能显然不常用，网页搜索没有产生任何提示： - （

I've tried numerous things, but somehow I can't seem to control the left edge of the LI content.
Also, this feature apparently isn't used terribly often, so web searches didn't yield any hints :-(

有没有人知道我一直在丢失什么？

Does anybody have an idea what I've been missing?

下面，您可以找到CSS和HTML，我已将测试用例放入此cssdesk中： http：// cssdesk.com/EzPBG

Below, you find both the CSS and the HTML, and I have put a test case into this cssdesk: http://cssdesk.com/EzPBG

CSS：

ol.wrong {
  margin-left: 0;
  padding-left: 20px;
  counter-reset: counter_level1;
  list-style: none outside none;
  display: block;
  line-height: 18px;
  width: 500px;
}
ol.wrong li {
  position: relative;
  list-style: none;
  margin-right:20px;
}
ol.wrong li:before {
  display: inline-block;
  position: relative;
  content: counter(counter_level1) ". ";
  counter-increment: counter_level1;
  font-weight: bold;
  width: 20px;
}

ol.wrong ol {
  counter-reset: counter_level2;
}  
ol.wrong ol li {
  margin-right:0px;
}
ol.wrong ol li:before {
  width: 40px;
  margin-left: 20px;
  content: counter(counter_level1, decimal) "." counter(counter_level2, decimal) ". ";
  counter-increment: counter_level2;
}

HTML

  <ol class="wrong">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            </ol>
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            </ol>
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    </ol>

推荐答案

以下是一种方法：

ol.wrong {
  margin-left: 0;
  padding-left: 20px;
  counter-reset: counter_level1;
  list-style: none outside none;
  display: block;
  line-height: 18px;
  width: 500px;
}
ol.wrong li {
  position: relative;
  list-style: none;
  margin-right:20px;
  padding-left: 20px; /* create some space for the counter label */
  outline: 1px dotted blue;
}
ol.wrong li:before {
  display: inline-block; /* block would also work */
  position: absolute; /* move this out of the way of the text*/
  left: 0; /* move the counter labe into the space from the padding */
  content: counter(counter_level1) ". ";
  counter-increment: counter_level1;
  font-weight: bold;
  width: 20px;
}

，您可以在以下位置检查代码： http://jsfiddle.net/audetwebdesign/wsmnJ/

and you can check the code at: http://jsfiddle.net/audetwebdesign/wsmnJ/

从添加一些填充开始ol.wrong li

Start by adding some padding to the left for ol.wrong li, this will create some white space for placing your label.

在您的伪元素样式中， ol.wrong li：之前，使用 position：absolute 删除文本的标签，并将其放置 left：0 。显示类型可以是阻止或 inline-block 。

In your pseudo-element styling, ol.wrong li:before, use position: absolute to remove the label out of the way of the text and position it left: 0. The display type can be either block or inline-block.

然后你就可以按照内部的，嵌套的 ol 。

You then follow suit for the inner, nested ol.

width到您的计数器/标签元素所需的宽度。

Just created padding to the left equal in width to the width that you need for your counter/label element.

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