홈>2020-02-26 14:19

html - css - 순서없는 목록은 0없이 양수에서 음수로?

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에서만 가능한지 보는 것은 매우 흥미로울 것입니다.

htmlcsscss3html-lists

답변 # 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>

Python2.net

html - css - 순서없는 목록은 0없이 양수에서 음수로?

관련 자료