중첩된 HTML 순서 목록 번호 매기기가 때때로 예기치 않은 결과를 생성하는 이유는 무엇입니까?

중첩 카운터 및 범위의 HTML 순서 목록 번호 매기기 문제

HTML에서 중첩 카운터 및 범위를 사용하면 다단계 목록 생성이 가능합니다. 각 수준마다 고유한 번호가 매겨진 순서가 지정된 목록입니다. 그러나 이 기술을 통합할 때 사용자는 잘못된 번호 매기기를 경험할 수 있습니다.

문제 설명

중첩된 순서 목록을 생성하는 것을 목표로 하는 다음 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>

예상되는 결과는 다음과 같이 적절하게 번호가 매겨진 목록입니다. 다음:

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 (Incorrect)
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

해결책

문제를 해결하려면 다음을 고려하십시오. 접근 방식:

"정규화" 선택을 취소하세요. CSS":

일부 개발 도구에 있는 "CSS 정규화" 옵션은 목록 여백 및 패딩을 포함한 CSS 속성을 재설정합니다. 이 옵션을 비활성화하면 의도한 여백과 안쪽 여백이 유지되어 올바른 번호 매기기가 가능해집니다.

기본

에 하위 목록 포함:

모든 하위 목록을 묶습니다. -주 목록 항목(

) 내의 목록은 명확한 계층 관계를 보장합니다. 이렇게 하면 잘못된 그룹화가 방지되고 번호가 올바르게 적용됩니다.

위 내용은 중첩된 HTML 순서 목록 번호 매기기가 때때로 예기치 않은 결과를 생성하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!