내 중첩된 정렬 목록 카운터가 HTML에서 작동하지 않는 이유는 무엇입니까?

HTML 순서 목록 카운터가 작동하지 않음

카운터와 범위를 사용하여 중첩된 순서 목록을 만들려고 하면 잘못된 번호 매기기가 발생할 수 있습니다. 이 글에서는 문제를 파헤쳐 원인을 탐색하고 해결책을 제시할 것입니다.

근본 원인

문제는 목록을 재설정하는 "CSS 정규화" 설정에서 발생합니다. 여백과 패딩을 0으로 설정합니다. 이 기본 설정은 적절한 카운터 기능에 필요한 스타일과 충돌합니다.

해결 방법

이 문제를 해결하려면 "CSS 정규화" 옵션을 비활성화하세요. 또는 기본 목록 요소 내에 하위 목록을 포함합니다. 다음 CSS 및 HTML 코드는 이 수정 사항을 보여줍니다.

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>

CSS 재설정을 비활성화하거나 HTML 구조를 수정하면 순서가 지정된 목록 카운터가 올바르게 작동하여 예상 번호 매기기가 표시됩니다.

위 내용은 내 중첩된 정렬 목록 카운터가 HTML에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!