source

주문한 목록이 CSS로 1.1, 1.2, 1.3(단, 1, 2, 3, ...)과 같은 결과를 낼 수 있습니까?

manycodes 2023. 9. 23. 22:49
반응형

주문한 목록이 CSS로 1.1, 1.2, 1.3(단, 1, 2, 3, ...)과 같은 결과를 낼 수 있습니까?

주문된 목록이 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 등)가 다양하기 때문에 일관된 들여쓰기를 수행하는 것은 매우 어렵습니다. 각 들여쓰기 수준에 대해 미리 계산된 마진/패딩을 사용하지 않더라도 단순히 "가짜"로 만들 수는 없습니다.

자바스크립트가 필요 없고 실제로 작동하는 솔루션을 드디어 찾았습니다.

파이어폭스 32, 크롬 37, IE 9, 안드로이드 브라우저에서 테스트되었습니다.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, ".") " ";
}

예: Example

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 */

결과:

screenshot

참고: 이 게시물의 소스 코드 등을 보려면 스크린샷: 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>

가까운 미래에는 코드 한 줄만으로 다른 솔루션과 동일한 결과를 얻기 위해 유사 요소를 사용할 수 있을 것입니다.

브라우저 호환성 표는 아직 실험적인 기술이므로 반드시 확인하시기 바랍니다.버전 68부터 안드로이드용 파이어폭스와 파이어폭스만 쓸 때는 이를 지원합니다.

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

::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>

여러분은 이 주제에 대한 잡지를 부수면서 이 훌륭한 기사를 확인하고 싶어할지도 모릅니다.

다음이 제게 도움이 되었습니다.

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/ .

<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>

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

두개의 리스트가 있고 두번째 리스트가 DIV 안에 있을 때 문제가 있습니다. 두번째 리스트는 2.1이 아니라 1.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/ 로 문제를 해결했습니다.

다른 css의 childli 크기를 먼저 조정하려면 이 코드가 적합합니다.

<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>

Python Markdown의 TOC Extension에 번호 목록을 추가한 후였습니다.

저는 이런 짓을 했습니다.

.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }

그게 올바른 방법인지는 모르겠지만, 저에게는 효과가 있었습니다.

저는 주문 리스트와 주문 리스트 구성 요소가 혼재된 리스트를 사용하고 있어서 12에 게시된 솔루션에 이를 추가해야 했습니다.내용: 인용구가 없는 것은 이상한 일인 것 같지만, 효과는 있습니다.

ol ul li:before {
  content: no-close-quote;
  counter-increment: none;
  display: list-item;
  margin-right: 100%;
  position: absolute;
  right: 10px;
}

.monospaceRFC 목차를 에뮬레이트하는 예제입니다.깊이 5단계.

/* Table of Contents - Decimal */
.toc-decimal ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
  font-family: monospace;
}
.toc-decimal ol li {
  display: table-row;
  counter-increment: item;
  margin-bottom: 0.6em;
}
.toc-decimal ol li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}
.toc-decimal ol li li {
  margin: 0;
}
.toc-decimal ol li li:before {
  content: counters(item, ".") ". ";
}


/* Table of Contents - Upper Alpha */
.toc-upper-alpha ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
  font-family: monospace;
}
.toc-upper-alpha ol li {
  display: table-row;
  counter-increment: item;
  margin-bottom: 0.6em;
}
.toc-upper-alpha ol li:before {
  content: "A." counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}
.toc-upper-alpha ol li li {
  margin: 0;
}
.toc-upper-alpha ol li li:before {
  content: "A." counters(item, ".") ". ";
}
<!-- Table of Contents - Decimal -->
<section class="toc-decimal">

  <!-- Ordered List -->
  <ol>
    <li>Depth 1
      <ol>
        <li>Depth 2</li>
        <li>Depth 2</li>
        <li>Depth 2
          <ol>
            <li>Depth 3</li>
            <li>Depth 3</li>
            <li>Depth 3
              <ol>
                <li>Depth 4</li>
                <li>Depth 4</li>
                <li>Depth 4
                  <ol>
                    <li>Depth 5</li>
                    <li>Depth 5</li>
                    <li>Depth 5</li>
                  </ol>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Depth 1</li>
  </ol>

</section>

<hr>

<!-- Table of Contents - Upper Alpha -->
<section class="toc-upper-alpha">

  <!-- Ordered List -->
  <ol>
    <li>Depth 1
      <ol>
        <li>Depth 2</li>
        <li>Depth 2</li>
        <li>Depth 2
          <ol>
            <li>Depth 3</li>
            <li>Depth 3</li>
            <li>Depth 3
              <ol>
                <li>Depth 4</li>
                <li>Depth 4</li>
                <li>Depth 4
                  <ol>
                    <li>Depth 5</li>
                    <li>Depth 5</li>
                    <li>Depth 5</li>
                  </ol>
                </li>
              </ol>
            </li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Depth 1</li>
  </ol>

</section>

언급URL : https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1

반응형

'source' 카테고리의 다른 글

파이썬: 'from X import Y'로 가져온 구성 요소 Y를 다시 로드하시겠습니까?  (0) 2023.09.23
WooCommerce 내 JetPack의 댓글 구독 상자 위치 변경  (0) 2023.09.23
PHP에서 INET_ATON()과 INET_NTOA()?  (0) 2023.09.23
CSS나 자바스크립트로 텍스트 선택을 비활성화하려면 어떻게 해야 합니까?  (0) 2023.09.23
SQL 개발자에서 tnsnames.ora를 찾을 수 있는 위치?  (0) 2023.09.18

'source'의 다른글

  • 현재글주문한 목록이 CSS로 1.1, 1.2, 1.3(단, 1, 2, 3, ...)과 같은 결과를 낼 수 있습니까?

관련글

댓글

티스토리툴바