HTML과 CSS에서 마침표 없이 순서가 지정된 목록을 만드는 방법은 무엇입니까?

HTML 및 CSS에서 마침표 없이 순서 있는 목록 만들기

HTML에서 순서 있는 목록은 숫자 뒤에 마침표가 있어야 한다는 일반적인 가정에도 불구하고 다음을 만드는 것이 가능합니다.

CSS 솔루션

의미 없는 목록 스타일 이미지 접근 방식을 사용하는 대신 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>

참고

이 솔루션은 IE6 및 IE7과 같은 이전 브라우저에서는 지원되지 않을 수 있는 :before 의사 선택기를 사용합니다. 이러한 브라우저의 경우 해당 브라우저만 대상으로 일반 목록 스타일을 표시하는 추가 규칙을 추가할 수 있습니다.

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

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