CSS를 사용하여 Firefox 3에서 정렬된 목록을 어떻게 사용자 정의할 수 있나요?

Firefox 3에서 순서 목록 사용자 정의

목록 번호 왼쪽 정렬:

왼쪽으로 -순서가 지정된 목록의 숫자를 정렬하려면 다음을 사용하세요. code:

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

이 코드는 숫자와 닫는 괄호를 표시하는 각 목록 항목 앞에 의사 요소를 생성합니다. 숫자는 고정 너비 2em 내에서 왼쪽 정렬되며 margin-left 속성은 목록 항목에서 들여쓰기되도록 합니다.

숫자 문자 변경:

순서가 지정된 목록에서 숫자 뒤의 문자를 변경하려면 li::before 선언에서 콘텐츠 속성 값을 수정하세요. 예를 들어 괄호 대신 마침표를 사용하려면 다음을 사용하세요.

content: counter(item) ".";

알파벳/로마자 목록용 CSS 솔루션:

순서 있는 목록을 변환하려면 type 속성을 사용하지 않고 숫자부터 알파벳 또는 로마 문자까지, counter-reset, counter-increment 및 list-style-type을 사용합니다. 속성:

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
  list-style-type: none;
}
li::before {
  display: inline-block;
  content: counters(item, ".") " ";
}

이 코드는 항목 카운터를 1부터 시작하도록 재설정하고, 각 목록 항목에 대해 이를 증가시키며, 목록 스타일 유형: 없음을 사용하여 기본 숫자를 숨깁니다. 그런 다음 콘텐츠 속성은 알파벳이나 로마자 뒤에 마침표를 표시하는 의사 요소를 생성합니다.

위 내용은 CSS를 사용하여 Firefox 3에서 정렬된 목록을 어떻게 사용자 정의할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!