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

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

답변

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

다음 스타일 시트에는 중첩 된 목록 항목이 “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>
스 니펫 확장

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

답변

이 페이지의 어떤 솔루션도 모든 레벨과 긴 (래핑 된) 단락에 대해 정확하고 보편적으로 작동하지 않습니다. 가변 크기의 마커 (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 에서 분기하십시오 .

답변

선택한 답변은 훌륭한 시작이지만 본질적으로 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/

답변

여기에 게시 된 솔루션이 저에게 효과적이지 않았 으므로이 질문과 다음 질문을 혼합하여 수행 했습니다 .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

답변

참고 : 최신 브라우저에서 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>
스 니펫 확장

답변

<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

답변

두 개의 목록이 있고 두 번째 목록이 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/에 의해 문제를 해결