HTML에서 중첩된 순서 목록의 번호를 올바르게 매길 수 있는 방법은 무엇입니까?

카운터와 범위를 사용하여 중첩 순서 목록(1.1, 1.2)의 수수께끼 풀기

카운터를 사용하여 계층 구조 내에서 중첩 순서 목록 캡슐화 그리고 범위는 엄청난 일이 될 수 있습니다. 개발자가 겪는 난제 중 하나는 목록에 잘못된 번호가 매겨져 있다는 것입니다. 이 글의 목표는 이 과제의 복잡성을 폭로하고 원활한 솔루션으로 가는 길을 밝히는 것입니다.

문제

중첩 하위를 사용하여 순서가 지정된 목록을 생성하려는 시도 -목록, 개발자는 번호 매기기에서 예상치 못한 편차를 발견합니다.

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three (incorrect numbering)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

그러나 원하는 결과는 다음과 같습니다.

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. CSS 정규화 비활성화

많은 경우 정규화에 사용되는 CSS 규칙 세트는 목록에 적용되는 기본 여백과 패딩을 제거합니다. 이로 인해 중첩된 목록의 의도된 간격이 중단될 수 있습니다. 이러한 간섭을 방지하려면 CSS 정규화 옵션을 비활성화하세요.

2. 하위 목록 캡슐화

적절한 열거를 보장하려면 각 하위 목록을 상위 목록 항목 내에 묶어야 합니다. 제공된 HTML 코드에서 하위 목록은 다음과 같이 캡슐화되어야 합니다.

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

이러한 문제를 해결함으로써 개발자는 정확한 번호 매기기를 유지하면서 중첩된 하위 목록으로 정렬된 목록을 효과적으로 구성할 수 있습니다.

위 내용은 HTML에서 중첩된 순서 목록의 번호를 올바르게 매길 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!