[html] HTML 순서 목록 1.1, 1.2 (중첩 된 카운터 및 범위)가 작동하지 않음

Program / 글쓴이

중첩 된 카운터와 범위를 사용하여 정렬 된 목록을 만듭니다.

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/

답변

선택을 취소 “정규화 CSS”- http://jsfiddle.net/qGCUk/3/
이 기본적으로 모든 목록 마진과 패딩 0에서 사용하는 CSS 리셋

업데이트 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>

스 니펫 확장

답변

이 스타일을 사용하여 중첩 된 목록 만 변경합니다.

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

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

답변

이것 좀 봐 :

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>

답변

이것은 훌륭한 솔루션입니다! 몇 가지 추가 CSS 규칙을 사용하면 첫 줄 들여 쓰기가있는 MS Word 개요 목록처럼 서식을 지정할 수 있습니다.

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

답변

최근 비슷한 문제가 발생했습니다. 수정 사항은 정렬 된 목록에있는 li 항목의 표시 속성을 표시 블록이 아닌 목록 항목으로 설정하고 ol의 표시 속성이 목록 항목이 아닌지 확인하는 것입니다. 즉

li { display: list-item;}

이를 통해 html 파서는 모든 li을 목록 항목으로보고 적절한 값을 할당하고 ol을 설정에 따라 인라인 블록 또는 블록 요소로보고 카운트 값을 할당하려고하지 않습니다. 그것.

답변

Moshe의 솔루션은 훌륭하지만 목록을 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.

답변

다른 답변을 살펴본 후 이것을 생각해 낸 후 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>

스 니펫 확장