IT박스

주문 목록의 시작 번호를 지정할 수 있습니까?

itboxs 2020. 7. 30. 10:13
반응형

주문 목록의 시작 번호를 지정할 수 있습니까?

초기 번호를 6으로하는 정렬 된 목록이 있습니다. HTML 4.01에서 지원됩니다 (더 이상 사용되지 않음). 이 사양에서는 CSS를 사용하여 시작 정수를 지정할 수 있다고 말합니다. ( start속성 대신 )

CSS로 시작 번호를 어떻게 지정 하시겠습니까?

특정 시점에서 정렬 된 목록 (OL)을 시작하는 기능이 필요한 경우, doctype을 HTML 5로 지정해야합니다. 이것은 :

<!doctype html>

해당 doctype start을 사용하면 정렬 된 목록 에서 속성 을 설정하는 것이 유효 합니다. 같은 :

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

<ol start="">HTML5 에서 더 이상 사용되지 않으므로 HTML4.01의 내용에 관계없이 계속 사용하고 싶습니다.

start="number" 번호 매기기에 따라 자동으로 변경되지 않기 때문에 짜증납니다.

더 복잡한 요구에 맞게 수이 작업을 수행하는 또 다른 방법은 사용하는 것입니다 counter-reset및 counter-increment.

문제

다음과 같은 것을 원한다고 가정하십시오. 

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

두 start="3"번째 li중 세 번째 에 설정할 수 ol있지만 이제 첫 번째에 항목을 추가 할 때마다 변경해야합니다ol

해결책

먼저 현재 번호 매기기의 서식을 지 웁니다.

ol {
  list-style: none;
}

우리는 각각의 리가 카운터를 보여줄 것입니다

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

이제 카운터 ol가 각 카운터 대신 첫 번째 카운터에서만 재설정되도록해야합니다 .

ol:first-of-type {
  counter-reset: mycounter;
}

데모

http://codepen.io/ajkochanowicz/pen/mJeNwY

이제 목록에 많은 항목을 추가 할 수 있으며 번호가 유지됩니다.

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

이 스레드에서 답을 찾을 수 없다는 것에 놀랐습니다.

이 소스를 찾았 으며 아래에서 요약했습니다.

HTML 대신 CSS를 사용하여 정렬 된 목록의 시작 속성을 설정하려면 counter-increment다음과 같이 속성을 사용할 수 있습니다 .

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-increment인덱스가 0 인 것처럼 보이므로 4에서 시작하는 목록을 얻으려면을 사용하십시오 3.

다음 HTML의 경우

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

내 결과는

d) Buy milk
e) Feed the dog
f) Drink coffee

내 바이올린을 확인

참조 W3 위키 참조

다른 사람들이 제안했듯이 element의 startattribute를 사용할 수 있습니다 ol.

또는 element의 valueattribute를 사용할 수 있습니다 li. 두 속성 모두 HTML 4.01 에서는 더 이상 사용되지 않는 것으로 표시 되지만 HTML 5 ( ol및 li) 에서는 표시되지 않습니다 .

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

기본값 ( "1")과 다른 숫자로 정렬 된 목록의 번호 매기기를 시작하려면 start속성이 필요 합니다. 이 속성은 HTML 4.01 사양 에서 허용 (더 이상 사용되지 않음)되었습니다 (HTML 4.01은이 질문이 게시 될 당시 "대체 사양"이 아님) . 현재 HTML 5.2 사양 에서도 여전히 허용됩니다 . 이 ol요소는 XHTML 1.0의 전이 DTD 에는 선택적 start속성이 있지만 XHTML 1.0의 엄격한 DTD 에는 없습니다 (문자열을 검색 하고 속성 목록을 확인). 따라서 이전의 의견 중 일부가 말한 내용에도 불구하고이 속성은 더 이상 사용 되지 않습니다 . 오히려 그것은 무효였다ATTLIST olstartHTML 4.01 및 XHTML 1.0의 엄격한 DTD에서 의견 중 하나가 주장하는 내용에도 불구하고 start속성은 ul요소에서 허용 되지 않으며 현재 Firefox 및 Chromium에서 작동하지 않습니다.

또한 Firefox 및 Chromium의 현재 버전에서는 천 단위 구분 기호가 작동하지 않습니다. 다음 코드 스 니펫에서 ; 10.000로 해석됩니다 10. 동일하게 적용됩니다 10,000. 따라서 다음 유형의 counter값을 사용하지 마십시오 .

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

따라서 사용해야하는 것은 다음과 같습니다 (드물게 1000보다 큰 값이 필요한 경우).

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Some of the other answers suggest using the CSS property counter, but this runs counter the traditional separation of content and layout (in HTML and CSS, respectively). Users with certain visual impairments may use their own style sheets, and the counter values might get lost as a result. Screen reader support for counter should also be tested. Screen reader support for content in CSS is a relatively recent feature and behaviour is not necessarily consistent. See Screen Readers and CSS: Are We Going Out of Style (and into Content)? by John Northup on the WebAIM blog (August 2017).

In case the lists are nested, there has to be a handling leaving out the nested list items, which I accomplished by verifying that the grand parent is not a list item.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

With CSS it is a bit tricky to cover the case that there are nested list items, thus only the first list level gets the custom numbering that does not interupt with each new ordered list. I'm using CSS combinator '>' to define the possible paths to the list items that shall get a custom numbering. See https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Obviously neither @start of an ordered list <ol> nor @value of a list item <li> can be set via CSS. See https://www.w3schools.com/css/css_list.asp

Replacing the numbering by a counter in CSS seems to be the best/fastest/foolproof solution and there are others promoting it, e.g. https://css-tricks.com/numbering-in-style/

With pure JavaScript it is possible to set @value of each list item, but this is of course slower than CSS. It is not even required to check if the list item belongs to an ordered list <ol>, because unordered lists are left out automatically.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}
<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

참고URL : https://stackoverflow.com/questions/779016/is-it-possible-to-specify-a-starting-number-for-an-ordered-list

반응형

'IT박스' 카테고리의 다른 글

Outlook에서 내 줄 자동 정리 및 전자 메일 형식 강화  (0) 2020.07.30
PHP에서 함수가 바이너리 안전하다는 것은 무엇을 의미합니까?  (0) 2020.07.30
XMLHttpRequest가 파일을로드 할 수 없습니다.  (0) 2020.07.30
lodash에 일치하는 항목을 대체하는 기능이 있습니까?  (0) 2020.07.30
위도 또는 경도를 미터로 변환하는 방법?  (0) 2020.07.30

'IT박스'의 다른글

  • 현재글주문 목록의 시작 번호를 지정할 수 있습니까?

관련글

댓글

티스토리툴바