> 웹 프론트엔드 > CSS 튜토리얼 > 낮은 알파 표시와 오른쪽 괄호를 사용하여 HTML 순서 목록을 어떻게 만들 수 있습니까?

낮은 알파 표시와 오른쪽 괄호를 사용하여 HTML 순서 목록을 어떻게 만들 수 있습니까?

DDD
풀어 주다: 2024-11-24 09:57:13
원래의
998명이 탐색했습니다.

How Can I Create an HTML Ordered List with Lower-Alpha Markers and Right Parentheses?

HTML의 순서가 지정된 목록: 오른쪽 괄호가 있는 낮은 알파

"낮은 알파"에 대한 표준 순서 목록 유형은 마침표 "를 사용합니다. ." 목록 마커로. 대신 오른쪽 괄호를 사용하여 a)... b) 등과 같은 시퀀스가 ​​되도록 수정하는 방법이 있나요?

해결책

CSS가 제공합니다. 장 번호와 같은 시퀀스를 자동으로 생성할 수 있는 카운터라는 기능입니다. 이 개념을 적용하면 오른쪽 괄호를 사용하여 원하는 하위 알파 목록을 얻을 수 있습니다.

다음은 코드 조각입니다.

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
로그인 후 복사

"counter-reset" 속성은 "라는 카운터를 초기화합니다. list"를 사용하여 주문된 목록을 확인하세요. "목록 스타일: 없음;" 기본 목록 기호를 제거합니다.

핵심 단계는 "li:before" 선택기입니다. 각 목록 항목 앞에 콘텐츠를 삽입합니다.

  • "counter(list, lower-alpha)"는 하위 알파벳 문자(a), b) 등을 사용하여 계산됩니다.
  • 닫는 괄호와 공백을 추가하면 원하는 형식이 생성됩니다. a)

결과 목록은 다음과 같이 표시됩니다. 다음:

`사용자 정의 목록 스타일 유형(v1):


  1. 1번

  2. < ;li>숫자 2

  3. 숫자 3

  4. 숫자 4

  5. 숫자 5

  6. 숫자 6

  7. `

    위 내용은 낮은 알파 표시와 오른쪽 괄호를 사용하여 HTML 순서 목록을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿