Html упорядоченный список 1.1, 1.2 (Вложенные счетчики и область действия) не работает

Я использую вложенные счетчики и область действия для создания упорядоченного списка html.

Это мой код: http://jsfiddle.net/qGCUk/2/

Я ожидаю следующий результат:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Вместо этого я вижу (неправильная нумерация):

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

У меня нет подсказки, кто-нибудь видит, где это происходит неправильно?

Ответы

Ответ 1

Снимите флажок "normalize CSS" - http://jsfiddle.net/qGCUk/3/ CSS reset, используемый по умолчанию для всех полей списка и paddings для 0

ОБНОВЛЕНИЕ http://jsfiddle.net/qGCUk/4/ - вы должны включить свои под-списки в свой основной <li>

<ol>
    <li>one</li>
    <li>two
        <ol>
            <li>two.one</li>
            <li>two.two</li>
            <li>two.three</li>
        </ol>
    </li>
    <li>three 
        <ol>
            <li>three.one</li>
            <li>three.two
                <ol>
                    <li>three.two.one</li>
                    <li>three.two.two</li>
                </ol>
            </li>
        </ol>
    </li> 
    <li>four</li>
</ol>

Ответ 2

Используйте этот стиль для изменения только вложенных списков:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}

Ответ 3

Проверьте это:

http://jsfiddle.net/PTbGc/

Ваша проблема, похоже, исправлена.

Что для меня отображается (в Chrome и Mac OS X)

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

Как я это сделал

Вместо

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

Do:

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>

Ответ 4

Это отличное решение! С помощью нескольких дополнительных правил CSS вы можете отформатировать его так же, как список контуров MS Word с висящим отступом первой строки:

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}

Ответ 5

Недавно я столкнулся с подобной проблемой. Исправление состоит в том, чтобы установить свойство отображения элементов li в упорядоченном списке на элемент списка, а не на блок отображения, и убедиться, что свойство отображения ol не является элементом списка. то есть

li { display: list-item;}

При этом анализатор html видит все li в качестве элемента списка и присваивает ему соответствующее значение и видит ol, как элемент встроенного блока или блока на основе ваших настроек, и не пытается назначить какой-либо значение счета для него.