CSS、UL/OL : Incorrect indent with custom counter

Question

更新:这个问题已经找到了一个非常令人满意的解决方案，但在生产中弹出了副作用，我在 this thread 中对此进行了描述。 .

---

所以，我在我的 OL 中使用自定义计数器来获得像“1 - 1.1 - 1.1.1”这样的编号
工作正常。

但是当我这样做的时候，LI 的缩进是错误的。文本与数字的左边缘对齐，而不是与右边缘对齐(像标准 OL 那样)。
编辑:为了按照我想要的方式排列数字，我不得不弄乱 OL 的标准填充/边距。
现在文本与数字的左边缘对齐，而不是与右边缘对齐(像标准 OL 那样)。

我尝试了很多方法，但不知何故我似乎无法控制 LI 内容的左边缘。
此外，此功能显然并不经常使用，因此网络搜索没有产生任何提示:-(

有人知道我遗漏了什么吗？

在下面，您可以找到 CSS 和 HTML，我已将测试用例放入此 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>

Answer 1

这是一种方法:

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/

伪元素技巧非常有用，在这个应用程序中是一个不错的选择。

首先在 ol.wrong li 的左侧添加一些填充，这将为放置标签创建一些空白。

在您的伪元素样式中，ol.wrong li:before，使用position: absolute 将标签从文本中移除并将其定位左:0。显示类型可以是 block 或 inline-block。

然后您可以对内部嵌套的 ol 进行仿效。

刚刚在左侧创建了宽度等于计数器/标签元素所需宽度的填充。