정렬 된 목록은 CSS를 사용하여 1.1, 1.2, 1.3 (1, 2, 3 대신 ...)과 같은 결과를 생성 할 수 있습니까?

201

정렬 된 목록이 CSS를 사용하여 1.1, 1.2, 1.3 (1, 2, 3, ... 대신)처럼 보이는 결과를 생성 할 수 있습니까? 지금까지는 list-style-type:decimal1.1, 1.2., 1.3이 아닌 1, 2, 3 만 생산했습니다.

html  css 
— 리차드 77
소스
Jakub Jirutka의 답변과 비교해 보시기 바랍니다. 나는 후자가 훨씬 낫다고 생각합니다.
— Frank Conijn
우아한 솔루션. Wikipedia가 왜 콘텐츠 섹션 대신 ul을 사용하는지 아십니까?
— Mattypants
1
@davnicwil 동의합니다. 아마도 9 월에 복제본을 잘못된 순서로 다시 적용한 것 같습니다.
— TylerH
쿨, 이제 나에게 결코 발생하지 않았기 때문에 어색한 느낌이 들었습니다. 사과와 같은 간단한 오류 일 수 있습니다!
— davnicwil

답변:

289

카운터 를 사용 하여 그렇게 할 수 있습니다 .

다음 스타일 시트에는 중첩 된 목록 항목이 "1", "1.1", "1.1.1"등으로 표시됩니다.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

예 

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
스 니펫 확장

자세한 내용은 중첩 카운터 및 범위 를 참조하십시오.

— 검보
소스
2
좋은 대답입니다. 이것에 대한 지원은 무엇입니까?
— Jason McCreary 12
1
— Gumbo
3
이 솔루션은 하나의 작은 것을 놓칩니다. 항목 번호 다음에 나오는 점. 표준 목록 스타일처럼 보이지 않습니다. 다음 규칙에 점을 추가하여 수정 li:before: content: counters(item, ".")". ";
— LS
4
이것은 나쁜 대답입니다. 제대로 작동하지 않습니다. 아래의 Jakub Jirutka의 답변을 확인하십시오
— Mr Pablo
1
@ Gumbo 내가 알고 있으며 Jakub의 대답은 올바른 번호를 매겼습니다.
— Mr Pablo
236

이 페이지의 어떤 솔루션도 모든 레벨과 긴 (래핑 된) 단락에 대해 정확하고 보편적으로 작동하지 않습니다. 가변 크기의 마커 (1., 1.2, 1.10, 1.10.5,…)로 인해 일관된 들여 쓰기를 달성하는 것은 정말 까다 롭습니다. 각 들여 쓰기 수준에 대해 미리 계산 된 여백 / 패딩이 없어도 "가짜"가 될 수 없습니다.

마침내 실제로 작동 하고 JavaScript가 필요없는 솔루션을 찾았습니다 .

Firefox 32, Chromium 37, IE 9 및 Android 브라우저에서 테스트되었습니다. IE 7 및 이전 버전에서는 작동하지 않습니다.

CSS :

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

예: 예

JSFiddle 에서 사용 해보고 Gist 에서 분기하십시오 .

— 야 aku 지루 카
소스
1
이러한 유형의 indention을 달성하는 것이 좋습니다. 그러나 나는 당신이 나열한 처음 2 개의 들여 쓰기 사례가 옳고 그른 것이 아니라 선호의 문제라고 주장합니다. 사례 1 과 사례 2를 고려하십시오 . 후자는 간격이 다루기 어려워지기 전에 훨씬 깔끔하게 보이지만 훨씬 더 많은 수준으로 짜낼 수 있습니다. 또한 MS Word와 기본 브라우저 스타일은 모두 사례 2 들여 쓰기입니다. 그들도 잘못하고 있다고 생각합니까?
— Saul Fautley
2
@ saul-fautley 타이포그래피의 관점에서 잘못되었습니다. 미묘한 중첩 레벨 수를 가진 예제는 중첩 번호 매기기가 너무 많은 레벨에 적합하지 않다는 것을 보여 주지만 이는 매우 분명합니다. MS Words는 조판 시스템이 아니며 타이포그래피가 열악한 단순한 문서 프로세서입니다. 기본 브라우저 스타일… 오, 타이포그래피에 대해 잘 모르십니까?
— Jakub Jirutka
3
실제로 모든 수준과 긴 단락에서 (기술적으로) 작동합니다. 수십 레벨을 사용하는 것이 합리적이라면 기술 솔루션과 관련이없는 또 다른 질문입니다. 요점은 다른 솔루션과 마찬가지로 각 중첩 수준에 대해 CSS 규칙을 미리 정의 할 필요가 없다는 것입니다.
— Jakub Jirutka
4
다른 답변에 본질적으로 "잘못된"내용이 있다고 말하지는 않지만 불완전하다고 말할 수 있습니다. 이 답변은 제 자리에 있으며, 내가 끔찍하게 기괴하게 스타일이 지정된 사이트에서 일했습니다.
— DanielM
2
@tremby : "display : table"대신 "display : table-row"를 사용하여 불일치를 해결할 수 있습니다. 이것이 초래하는 문제는 테이블 행이 항상 내용에 의해 자동으로 크기가 조정되므로 li이 여백 / 패딩을 사용할 수 없다는 것입니다. "display : block"과 함께 "li : after"를 추가하면이 문제를 해결할 수 있습니다. 전체 예는 jsFiddle 을 참조하십시오 . 추가 보너스로 "text-align : right"를 "li : before"에 추가하여 숫자를 올바르게 정렬했습니다.
— mmlr
64

선택한 답변은 훌륭한 시작이지만 본질적으로 list-style-position: inside;목록 항목에 스타일을 적용하여 줄 바꿈 된 텍스트를 읽기 어렵게 만듭니다. 다음은 간단한 해결 방법으로 숫자와 텍스트 사이의 여백을 제어하고 기본 동작에 따라 숫자를 오른쪽 정렬합니다.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle : http://jsfiddle.net/3J4Bu/

— 사울 포 틀리
소스
한 가지 단점은 각 목록 항목의 끝에 마침표를 추가한다는 것입니다.
— Davin Studer
3
@Davin Studer : 기본 ol동작에 따라 각 숫자의 끝에 마침표 만 추가합니다 . 속성 에서 마지막 "."을 삭제하여 쉽게 제거 할 수 content는 있지만 조금 이상하게 보입니다.
— Saul Fautley
14

여기에 게시 된 솔루션이 저에게 효과적이지 않았 으므로이 질문과 다음 질문을 혼합하여 수행 했습니다 .HTML로 다단계 순서 목록을 만들 수 있습니까?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

결과:

스크린 샷

참고 : 소스 코드 또는이 게시물의 내용을 보려면 스크린 샷을 참조하십시오 : http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

— 킬러
소스
1
이것은 전체 페이지에서 가장 훌륭하고 간단한 답변입니다.
— 브루노 토폴로
6

참고 : 최신 브라우저에서 CSS 를 사용하여 중첩 번호 매기기를 만드십시오. 허용 된 답변을 참조하십시오. 다음은 역사적 관심사를위한 것입니다.counters

브라우저 지원하는 경우 content와 counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}
<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>
스 니펫 확장

— kennytm
소스
이 솔루션은 목록이 중첩되면 크게 실패합니다.
— LS
@LS 필요에 따라 선택기를 항상 수용 할 수 있습니다. .foo > ol > li.
— kennytm
1
내 요점은 당신이 "1"을 하드 코딩했다는 것입니다. 스타일로. 하위 목록이 상위 목록에서 두 번째 항목의 하위 항목 인 경우 어떻게됩니까? "2"로 나타나길 원하지만 항상 "1"이됩니다. 여기에 코딩 된 방식 때문입니다. 해결책은 무엇입니까? 가능한 모든 숫자에 대해 새로운 스타일 세트를 만드시겠습니까? 아닙니다 . counters()위의 예에서와 같이 counter()함수 대신 함수를 사용하십시오 .
— LS
2 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

결과 : http://i.stack.imgur.com/78bN8.jpg

— KingRider
소스
2

두 개의 목록이 있고 두 번째 목록이 DIV에있을 때 문제가 있습니다. 두 번째 목록은 1에서 시작해야합니다. 2.1이 아닙니다.

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

편집 : 나는이 http://jsfiddle.net/hy5f6161/에 의해 문제를 해결

— 로버트
소스
1

가까운 장래에 ::markerpsuedo 요소 를 사용하여 한 줄의 코드로 다른 솔루션과 동일한 결과를 얻을 수 있습니다.

아직 실험 기술이므로 브라우저 호환성 표 를 확인하십시오 . 버전 68부터 Firefox 및 Firefox for Android 만 작성하는 순간에이를 지원합니다.

호환되는 브라우저에서 시도하면 올바르게 렌더링되는 스 니펫은 다음과 같습니다. 

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
스 니펫 확장

주제에 대한 잡지 를 박살 내서이 위대한 기사 를 확인하고 싶을 수도 있습니다 .

— 티 레온
소스
0

정렬 된 목록과 정렬되지 않은 목록 구성 요소가 혼합 된 목록을 사용하면서 12에 게시 된 솔루션에 이것을 추가해야했습니다. 내용 : 가까운 따옴표는 내가 아는 이상한 일처럼 보이지만 작동합니다 ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}
— 벤 자렛
소스
0

다음은 나를 위해 일했습니다.

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

봐에서 : http://jsfiddle.net/rLebz84u/2/

또는이 더 정당한 텍스트가있는 http://jsfiddle.net/rLebz84u/3/

— 윌리 ka 카
소스
볼 시간 낭비. 이전 답변과 거의 동일합니다. 마커 끝에 ")"만 추가되었습니다.
— juanitogan
0

다른 CSS의 크기를 먼저 조정하려는 경우 올바른 코드입니다.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

html 파일로.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>
— Sandeep Kumar
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.