CSS, UL/OL: Incorrect indent with custom counter

问题

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>

回答1:

Here is one approach:

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

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

The pseudo-element trick is quite useful, and a good choice in this application.

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

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.

You then follow suit for the inner, nested ol.

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

回答2:

I agree with Marc Audet, interesting CSS, however by dispensing with HTML's natural way to deal with nested lists you've created your own little world to contend with. As far as I understand it there are three possible ways to deal with this:

Firstly, go back to the standard native way to deal with nested lists as you have with your "standard indentation" list.

Secondly, add something like this to the pseudo-element...

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

...The floating of the pseudo-element kicks the rest of the LI to the right, however setting the height to a fixed value isn't very flexible unless you can guarantee that all LIs will be the same height (alternatively you can set several heights and choose whichever suits each particular LI... again, though, rather clunky).

Finally, taking the above idea and adding some javascript to deal with changing the height of the pseudo-element on the fly... if this is even possible.

回答3:

Daniela, I'd think the simple solution is to use positive and negative positioning. the LI is moved to the right (+20px) whereas the counter is moved to the left (-20px). I think it's easier to check this fiddle: http://fiddle.jshell.net/Gbf6u/

来源：https://stackoverflow.com/questions/16521330/css-ul-ol-incorrect-indent-with-custom-counter

标签

css

html-lists

counter

before-filter