마침표 없이 HTML/CSS에서 정렬된 목록을 어떻게 만들 수 있나요?

HTML/CSS에서 마침표 없이 정렬된 목록 만들기

정렬된 목록은 일반적으로 목록 번호 뒤에 마침표가 표시됩니다. 하지만 이러한 마침표를 제거하여 모양을 맞춤설정해야 한다면 어떻게 해야 할까요? 다음은 사용 가능한 HTML 및 CSS 솔루션을 살펴보겠습니다.

사용자가 언급했듯이 CSS는 사용자 정의 스타일을 통해 이를 달성할 수 있는 수단을 제공합니다. 수정할 주요 CSS 속성은 다음과 같습니다.

• list-style-type: 기본 마침표를 제거하고 새 유형을 적용합니다.
• counter-increment 및 counter-reset: 생성 목록 번호를 생성할 사용자 정의 카운터.
• content: 의사 요소 내에서 생성된 카운터를 사용합니다.

다음 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 속성을 결합하면 마침표 없이 숫자를 표시하는 순서가 지정된 목록을 만들 수 있습니다. 또한 카운터 증가: customlistcounter; 원하는 경우 속성을 사용하여 대체 구분 문자를 지정할 수 있습니다.

그러나 IE6 및 IE7과 같은 일부 이전 브라우저는 :before 의사 선택기를 지원하지 않는다는 점에 유의할 가치가 있습니다. 호환성을 보장하려면 이러한 브라우저를 대상으로 하는 추가 CSS 규칙을 추가하고 기본 목록 스타일 모양을 사용하는 것이 좋습니다.

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

위 내용은 마침표 없이 HTML/CSS에서 정렬된 목록을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!