HTML 및 CSS의 순서 목록에서 마침표를 제거하는 방법은 무엇입니까?

HTML 및 CSS에서 순서 목록 사용자 정의

순서 목록은 정보를 순차적으로 표시하는 데 유용한 도구입니다. 그러나 기본 스타일에는 각 숫자 뒤에 마침표가 포함되는 경우가 많으며 이는 항상 바람직하지 않을 수 있습니다. 이 문서에서는 정렬된 목록을 사용자 정의하고 마침표 구분 기호를 제거하는 방법을 살펴봅니다.

마침표 없이 정렬된 목록 생성

전통적으로 정렬된 목록에서 마침표를 제거하려면 각 숫자에 대한 사용자 정의 클래스와 list-style-image 속성을 사용합니다. 그러나 우아하고 의미 있는 CSS 전용 솔루션이 존재합니다.

<code class="css">ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}</code>

이 솔루션은 CSS 카운터와 :before 의사 요소를 사용하여 사용자 정의 번호 매기기를 생성합니다. 기본 글머리 기호 또는 번호를 제거하려면 list-style-type 속성을 none으로 설정합니다. counter-reset 속성은 카운터가 1부터 시작하도록 보장합니다.

브라우저 호환성

이 솔루션은 :before 의사 선택기에 의존한다는 점에 유의하는 것이 중요합니다. IE6 및 IE7에서는 지원되지 않습니다. 이러한 브라우저의 경우 추가 CSS 규칙을 추가할 수 있습니다.

<code class="css">ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}</code>

이 규칙은 사용자 정의 스타일을 재정의하고 IE6 및 IE7이 기본 번호 목록을 표시하도록 합니다.

위 내용은 HTML 및 CSS의 순서 목록에서 마침표를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!