>

CSS 만 사용하여 0없이 양수에서 음수로 정렬 된 목록을 만들 수 있습니까? 예 :

3. Highest
 2. Higher
 1. High
-1. Low
-2. Lower
-3. Lowest

프레젠테이션이 매우 특이하다는 것을 알고 있습니다. 하나의 필드로 가장 즐겨 찾기 목록과 가장 즐겨 찾기 목록을 작성합니다.

기술적 인 배경 :이 필드는 Joomla! FLEXIcontent의 텍스트 필드 를 통한 CMS . 필드는 여러 항목을 사용할 수 있도록 구성되며 짝수의 항목 만 사용할 수 있도록 제한됩니다. 사용자는 주어진 필드에 대해 동일한 수의 장단점을 입력해야합니다. CSS에서 모든 것을 독점적으로 제어 할 수 있기를 원한다면 가능한 경우 템플릿 재정의를 만들 필요가 없습니다.

한 세트에 여러 필드를 필요로하지 않기 때문에이 방법을 선택했습니다.

숫자를 스타일링하기위한 다양한 리소스를 찾았습니다. PHP로 일부 요소를 제어해야하거나 마크 업에 한계가 있으므로 다음이 작동하지 않을 것이라고 생각합니다.

<ol>
    <li value=#>List Item</li> <!--needs value populated by PHP-->
</ol>
<ol reversed> <!--Stays positive and ends at 1-->
    <li>Reversed List</li> 
</ol>
<ol reversed start=2> <!--Can I control where to start based on number of children?-->
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ol>

작업이 완전히 불가능한 경우 자녀 수를 기준으로 스타일을 지정하고 전반과 후반을 다르게 색칠하는 것이 더 실용적 일 수 있습니다. 그래도 이것이 CSS에서만 가능한지 보는 것은 매우 흥미로울 것입니다.

  • 답변 # 1

    좋은 질문입니다! 이것은 CSS가 할 수있는 것의 약간 다른 흥미로운 예입니다.

    문제에 대한 해결책은 아래 코드를 참조하십시오. SASS를 사용하는 경우 필요한 모든 선택기를 생성하기 위해 믹스 인을 쉽게 만들 수 있습니다.

    CSS 카운터를 사용하면 목록 번호를 위조 한 다음 nth-child 를 사용할 수 있습니다   0 가 표시되지 않도록 카운터를 재설정하는 방법  항목.

    시작 번호가있는 솔루션

    ol {
      list-style: none;
      margin: 0;
      padding: 0 0 0 1.5em;
    }
    ol[start="1"] {
      counter-reset: ol 2;
    }
    ol[start="1"] li:nth-child(2) {
      counter-reset: ol 0;
    }
    ol[start="2"] {
      counter-reset: ol 3;
    }
    ol[start="2"] li:nth-child(3) {
      counter-reset: ol 0;
    }
    ol[start="3"] {
      counter-reset: ol 4;
    }
    ol[start="3"] li:nth-child(4) {
      counter-reset: ol 0;
    }
    ol li::before {
      counter-increment: ol -1;
      content: counter(ol) '.';
      text-align: right;
      margin: 0 .5em 0 -1.5em;
      display: inline-block;
      width: 1em;
    }
    
    

    <h2>Start at 1</h2>
    <ol start="1">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
      <li>List item 6</li>
    </ol>
    <h2>Start at 2</h2>
    <ol start="2">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
      <li>List item 6</li>
    </ol>
    <h2>Start at 3</h2>
    <ol start="3">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
      <li>List item 6</li>
    </ol>
    
    

    시작 번호는 없지만 양수 및 음수 목록 항목이 동일한 솔루션

    start 를 추가하지 않고도이 기능을 사용하려면   ol 의 속성  이 CSS를 사용할 수있는 동일한 수의 긍정적 및 부정적 목록 항목이 항상 있습니다. 그러나 다시 필요한 모든 항목 수에 대한 선택기를 작성해야합니다.

    ol {
      list-style: none;
      margin: 0;
      padding: 0 0 0 1.5em;
    }
    /* two items */
    ol li:nth-child(1):nth-last-child(2) {
      counter-reset: ol 2;
    }
    ol li:nth-child(2):nth-last-child(1) {
      counter-reset: ol 0;
    }
    /* fouritems */
    ol li:nth-child(1):nth-last-child(4) {
      counter-reset: ol 3;
    }
    ol li:nth-child(3):nth-last-child(2) {
      counter-reset: ol 0;
    }
    /* six items */
    ol li:nth-child(1):nth-last-child(6) {
      counter-reset: ol 4;
    }
    ol li:nth-child(4):nth-last-child(3) {
      counter-reset: ol 0;
    }
    
    ol li::before {
      counter-increment: ol -1;
      content: counter(ol) '.';
      text-align: right;
      margin: 0 .5em 0 -1.5em;
      display: inline-block;
      width: 1em;
    }
    
    

    <h2>Two Items</h2>
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
    </ol>
    <h2>Four Items</h2>
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ol>
    <h2>Six Items</h2>
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
      <li>List item 6</li>
    </ol>
    
    

관련 자료

  • 이전 javascript - requestAnimationFrame 폴리 필을 사용할 때 타임 아웃을 해제해야합니까?
  • 다음 php - 무료 워드 프레스 테마에서 섹션 재정렬