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删除标签之外的标签并将其定位left: 0。显示类型可以是block或inline-block。

然后，您将对内部嵌套ol进行跟进。

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

Answer 2

我同意Marc Audet这个有趣的CSS，但是通过使用HTML处理嵌套列表的自然方式，你已经创建了自己的小世界来应对。据我了解，有三种方法可以解决这个问题：

首先，回到标准的本机方式处理嵌套列表，就像使用“标准缩进”列表一样。

其次，将这样的内容添加到伪元素......

ol.wrong li:before {
  float:left;
  height:80px;
}

...伪元素的浮动将LI的其余部分踢到右边，但是将高度设置为固定值并不是非常灵活，除非你能保证所有的LI都是相同的高度（或者你可以设置几个高度并选择适合每个特定LI的任何一个......但是，相当笨重）。

最后，采取上述想法并添加一些javascript来处理即时更改伪元素的高度...如果这是可能的话。

Answer 3

Daniela，我认为简单的解决方案是使用积极和消极的定位。 LI向右移动（+ 20px），而计数器向左移动（-20px）。我认为检查这个小提琴更容易： http://fiddle.jshell.net/Gbf6u/

CSS，UL / OL：自定义计数器的缩进不正确

3 个答案: