HTML 및 CSS에서 중첩된 순서 목록에 잘못된 번호 매기기가 표시되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

번호 매기기가 잘못된 중첩된 순서 목록

이 문제는 HTML 및 CSS를 사용하여 중첩된 순서 목록을 생성할 때 발생합니다. 다음 코드가 사용됩니다.

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

해결책:

이 문제를 해결하려면 두 가지 해결 방법을 사용할 수 있습니다.

1. "CSS 정규화" 비활성화 JSFiddle. 이 옵션은 기본적으로 모든 목록 여백과 패딩을 0으로 설정합니다.
2. 기본

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>

구현되면 순서가 지정된 목록에 의도한 대로 올바른 번호가 표시됩니다.

위 내용은 HTML 및 CSS에서 중첩된 순서 목록에 잘못된 번호 매기기가 표시되는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!