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

62

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

<code>ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}</code>
<code><ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol></code>

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

<code>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
</code>

Вместо этого это то, что я вижу(wrong numbering):

<code>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
</code>

Понятия не имею, кто-нибудь видит, где что идет не так?

Вот JSFiddle:http://jsfiddle.net/qGCUk/2/

Ваш Ответ

5   ответов
13

Check this out :

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

How I did it


Instead of :

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

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

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

Я недавно столкнулся с подобной проблемой. Исправление заключается в том, чтобы установить для свойства отображения элементов li в упорядоченном списке значение list-item, а не для display-блока, и убедиться, что свойство display ol не является list-item. т.е.

li { display: list-item;}

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

Error: User Rate Limit Exceeded
72

Снимите флажок & quot; нормализовать CSS & quot; -http://jsfiddle.net/qGCUk/3/ Сброс CSS, используемый в этом, по умолчанию все поля списка и отступы равны 0

UPDATE http://jsfiddle.net/qGCUk/4/  - вы должны включить свои подсписки в свой основной<li>

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}
<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>

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded1.Error: User Rate Limit Exceeded1.1. 1.2. 1.3.Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/qGCUk/538
44

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

Похожие вопросы