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

HTML 및 CSS의 순서 목록: 마침표 제거

CSS를 사용하면 숫자 뒤에 마침표가 없는 순서 목록을 만드는 것이 가능합니다. 불가능하다고 생각할 수도 있지만 이를 달성할 수 있는 방법을 살펴보겠습니다.

마침표를 제거하려면 다음과 같이 목록 스타일을 지정하세요.

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

사용자 정의 숫자를 만들려면 다음을 사용하세요. code:

<code class="css">ol.custom > li {
  counter-increment: customlistcounter;
}

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

이렇게 하면 각 목록 항목 앞에 맞춤 숫자가 표시됩니다.

이 솔루션은 :before 의사 선택기에 의존하므로 다음과 같은 이전 브라우저에서는 작동하지 않을 수 있습니다. IE6과 IE7. 이 문제를 해결하려면 다음 브라우저를 구체적으로 대상으로 하는 추가 CSS 규칙을 사용하세요.

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

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