홈>
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
관련 자료
- rpgle - 조건 - rpg의 양수와 음수
- c++ - 16 비트 이진수가 음수인지 양수인지 확인
- python - 동일한 ID에 양수 값과 음수 값이 모두 있으면 id에서 양수 값을 선택하십시오
- react-native-simple-dialogs 플러그인의 양수 또는 음수 버튼에서 글꼴 모음을 변경하는 방법
- mql4 - MACD 값이 음수인지 양수인지 확인하는 방법
- excel - 조건이 충족되면 양수를 음수로 변경
- 파이썬은 사용자 입력을 긍정적 또는 부정적으로 식별합니다
- r - 양수 및 음수 부호가있는 숫자 추출
- c++ - 텍스트 파일에서 음수와 양수를 동적으로 추출하는 방법은 무엇입니까?
- android layout - 겹치지 않고 음수 여백을 사용하는 방법은 무엇입니까?
- python - 시리즈 또는 numpy 배열에서 음수 부호와 양수 부호 변경을 구별하는 방법
- c - 목록을 두 개의 개별 긍정 및 부정 목록으로 분할
- java - 양수 또는 음수로 4 개의 숫자를 입력 한 다음 if else를 사용하여 모든 음수를 더합니다
- javascript - d3 - 양수 및 음수 값이있는 차트
- javascript - 소수가있는 양수 및 음수에 대한 음수 일치 정규식
- google 시트 - vlookup을 사용하여 열의 양수와 음수를 분리하고 합산
- R에서 음수 및 양의 정수가있는 열에 대한 행 수를 수행하는 방법은 무엇입니까?
- python - 음수 및 양수 키를 사용하여 asc 또는 desc로 사전을 정렬하는 방법은 무엇입니까?
- sql - 수식을 두 번 입력하지 않고 부정적인 결과를 0으로 설정하는 방법
- list - 2로 나눌 수있는 양의 정수와 3으로 나눌 수있는 음의 정수
관련 질문
- javascript : jQuery를 사용하여 특정 div가 존재하지 않는 경우 어떻게 div를 숨길 수 있습니까?
- html : 탐색 막대의 이미지에 : hover를 어떻게 추가합니까?
- javascript : 이전 애니메이션의 마지막 프레임에서 애니메이션을 시작하는 방법은 무엇입니까?
- javascript : 메뉴가 스크롤 상단에 고정되기를 원합니다.
- html : "너비 : calc (100 % /3);" 제대로 작동하지 않음
- html : 컨테이너 유체 내부의 콘텐츠를 부트 스트랩 4의 컨테이너와 정렬하는 방법은 무엇입니까?
- html : 뷰 중심에서 원래 위치까지 요소 애니메이션
- javascript : 메모장 크롬 확장 프로그램을 닫을 때 사용자의 메모가 손실되지 않도록하는 방법은 무엇입니까?
- javascript : 선택한 메트로 UI CSS 타일 요소가 작동하지 않습니다.
- javascript : 브라우저 화면 크기를 조정할 때 목록의 항목 크기가 조정되지 않도록합니다.
좋은 질문입니다! 이것은 CSS가 할 수있는 것의 약간 다른 흥미로운 예입니다.
문제에 대한 해결책은 아래 코드를 참조하십시오. SASS를 사용하는 경우 필요한 모든 선택기를 생성하기 위해 믹스 인을 쉽게 만들 수 있습니다.
CSS 카운터를 사용하면 목록 번호를 위조 한 다음
nth-child
를 사용할 수 있습니다0
가 표시되지 않도록 카운터를 재설정하는 방법 항목.시작 번호가있는 솔루션
시작 번호는 없지만 양수 및 음수 목록 항목이 동일한 솔루션
start
를 추가하지 않고도이 기능을 사용하려면ol
의 속성 이 CSS를 사용할 수있는 동일한 수의 긍정적 및 부정적 목록 항목이 항상 있습니다. 그러나 다시 필요한 모든 항목 수에 대한 선택기를 작성해야합니다.