1

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

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

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).
Edit: 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).

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?

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>
4

3 回答 3

2

这是一种方法：

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.

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

于 2013-05-13T12:16:35.800 回答
0

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

于 2013-07-11T13:55:49.350 回答
0

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

首先，回到处理“标准缩进”列表的标准本地方式来处理嵌套列表。

其次，在伪元素中添加这样的东西......

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

...伪元素的浮动将 LI 的其余部分向右踢，但是将高度设置为固定值不是很灵活，除非您可以保证所有 LI 的高度相同（或者您可以设置几个高度，然后选择适合每个特定 LI 的那个……再一次，虽然，相当笨重）。

最后，采用上述想法并添加一些javascript来处理动态更改伪元素的高度......如果这甚至可能的话。

于 2013-05-13T12:16:01.390 回答