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

87

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

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}
<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>
Развернуть фрагмент

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

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

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

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

html css html-lists кортик
источник

Ответы:

102

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

ОБНОВЛЕНИЕ 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>
Развернуть фрагмент

Золтан Тот
источник
3
Как сделать так, чтобы его индекс сопровождался точкой - вроде 1.> 1.1. 1.2. 1.3.и так далее?
URL87
2
Просто не забудьте исправить селекторы CSS, чтобы это не влияло на такие вещи, как списки навигации.
Okomikeruko
@Okomikeruko Что значит «исправить селекторы css»? Потому что я столкнулся именно с той проблемой, о которой вы упомянули, - этот трюк влияет не только на нумерованный список, для которого я хочу его использовать, но и на другие списки в моем HTML. : - \ Nevermind: Ответ Моше Симантова исправляет это. :)
antred
1
Атрибуты элемента @antred, такие как idи classпозволяют вам определять CSS, специфичный для этих элементов, с помощью селекторов. Если вы используете одеяло li, ul, и olт.д., то CSS влияет на все его экземпляры. Но если вы установите для своего элемента значение, <ol class="cleared">а селектор CSS - значение ol.cleared, то вы не повлияете на другие olэлементы без необходимости.
Окомикеруко,
64

Используйте этот стиль, чтобы изменить только вложенные списки:

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
Моше Симантов
источник
2
Большой! Сработало для меня "из коробки"! Тода.
yO_
3
Это лучший ответ, поскольку он также имеет первый уровень с точкой и вставкой содержимого.
Мартин Эклебен,
если добавить font-weight: boldк ol ol > li:beforeсчетчикам вложенного списка являются , boldно это не делает счетчики первого списка уровня bold?
Сушмит Сагар,
14

Проверь это :

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>

Делать :

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
Доктор Камелеон
источник
7

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

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
ChaosFreak
источник
2
Проблема с этим подходом в том, что вы не можете скопировать номера списка. Так что, если вы скопируете огромный список, он будет без цифр
Рохит
1

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

li { display: list-item;}

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

Бабатунде Калебс
источник
Это дублирует нумерацию.
TylerH
0

Решение Моше отличное, но проблема может все еще существовать, если вам нужно поместить список в файл div. (читайте: сброс счетчика CSS во вложенном списке )

Этот стиль может предотвратить эту проблему:

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</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>
</div>
Развернуть фрагмент

Вы также можете включить сброс счетчика li:before.

сабоши69
источник
что, если мне нужен не конечный элемент .во вложенном списке, а корневой список?
Сушмит Сагар,
0

Пройдя через другие ответы, я придумал это, просто примените класс nested-counter-listк корневому olтегу:

код sass:

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

css код :

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}


ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}
<ol class="nested-counter-list">
  <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>
Развернуть фрагмент

И если вам нужен трейлинг .в конце счетчиков вложенного списка, используйте это:

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}
<ol class="nested-counter-list">
  <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>
Развернуть фрагмент

Сушмит Сагар
источник
0

Будь проще!

Более простое и стандартное решение для увеличения числа и сохранения точки в конце. Даже если вы правильно написали css, он не будет работать, если ваш HTML неправильный. увидеть ниже.

CSS

ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counters(item, ". ") ". ";
  counter-increment: item;
}

SASS

ol {
    counter-reset: item;
    li {
        display: block;
        &:before {
            content: counters(item, ". ") ". ";
            counter-increment: item
        }
    }
}

HTML родительский ребенок

Если вы добавляете ребенка, убедитесь, что он находится ниже родительского li.

<!-- WRONG -->
<ol>
    <li>Parent 1</li> <!-- Parent is Individual. Not hugging -->
        <ol> 
            <li>Child</li>
        </ol>
    <li>Parent 2</li>
</ol>

<!-- RIGHT -->
<ol>
    <li>Parent 1 
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent is Hugging the child -->
    <li>Parent 2</li>
</ol>
Декстер
источник