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

87

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

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/

html  css  html-lists 
— 단도
소스

답변:

102

선택을 취소 "정규화 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>
스 니펫 확장

— 졸탄 토스
소스
2
색인을 만드는 방법은 다음과 같습니다. 1.> 1.1. 1.2. 1.3.등등?
— URL87 2014 년
2
탐색 목록과 같은 것에 영향을 미치지 않도록 CSS 선택기를 수정하십시오.
— Okomikeruko
@Okomikeruko "css 선택기 수정"이란 무엇을 의미합니까? 나는 당신이 언급 한 문제를 정확히 실행하고 있기 때문에-이 트릭은 내가 사용하려는 번호 매기기 목록뿐만 아니라 내 HTML의 다른 목록에도 영향을 미칩니다. :-\ 신경 쓰지 마세요 : Moshe Simantov의 답변이이를 수정합니다. :)
— 개미
1
@antred 요소는 같은 속성 id과 class는 선택기에 해당 요소에 CSS의 특정을 정의 할 수 있습니다. 당신이 담요를 사용하는 경우 li, ul, ol등, 다음 CSS는 그것의 모든 인스턴스에 영향을 미칩니다. 그러나 요소를로 설정 <ol class="cleared">하고 CSS 선택기를 로 설정 ol.cleared하면 다른 ol요소에 불필요하게 영향을주지 않습니다 .
— Okomikeruko
64

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

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
— 모셰 시마 토프
소스
2
큰! 나를 위해 즉시 작업했습니다! 토다.
— yO_
3
요점이있는 첫 번째 수준과 내용이 삽입되어 있기 때문에 이것이 가장 좋은 답변입니다.
— Martin Eckleben
내가 추가하는 경우 font-weight: bold에 ol ol > li:before중첩 된 목록의 카운터입니다 bold하지만 첫 번째 수준 목록의 카운터가되지 않습니다 bold?
— Sushmit Sagar
14

이것 좀 봐 :

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>
— 카멜레온 박사
소스
7

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

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
— 카오스 프릭
소스
2
이 접근 방식의 문제점은 목록 번호를 복사 할 수 없다는 것입니다. 따라서 거대한 목록을 복사하면 숫자가 없습니다
— Rohit
1

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

li { display: list-item;}

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

— 바바 툰데 칼렙 스
소스
이것은 번호 매기기를 복제합니다.
— TylerH
0

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.

— 사보시 69
소스
.중첩 목록 의 후행 이 아니라 루트 목록을 원하지 않으면 어떻게합니까?
— Sushmit Sagar
0

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

— Sushmit Sagar
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.