ProgramingTip

ABC 주문 목록 항목을 굵은 스타일로 만들기

bestdevel 2021. 1. 9. 16:26
반응형

ABC 주문 목록 항목을 굵은 스타일로 만들기


유형이 "A"로 제공되는 html 주문 목록이 있습니다.

<ol type="A">...</ol>

따라서 각 목록 항목은 A, B, C 등으로 시작됩니다.

A, B, C 글자를 굵게 스타일링하고 싶습니다. font-weight : bold 설정을 시도했습니다. CSS를 통해 작동했지만. 이를 수행하는 방법에 대한 제안 제안 사항이 있습니까?


약간의 속임수이지만 작동합니다.

HTML :

<ol type="A" style="font-weight: bold;">
  <li><span>Text</span></li>
  <li><span>More text</span></li>
</ol>

CSS :

li span { font-weight: normal; }

대안적인 우수한 솔루션으로 요소에서 사용자 정의 카운터를 사용할 수 있습니다. 추가 HTML 마크 업이 필요하지 않습니다. CSS를 함께 사용하거나 최소한의 ol요소 ( list-style-type: none, reset margin) 에서 스타일을 제거 해야합니다. 두 개의 숫자 카운터가 있습니다.

<ol>
    <li>First line</li>
    <li>Second line</li>
</ol>

CSS :

ol {
    counter-reset: my-badass-counter;
}
ol li:before {
    content: counter(my-badass-counter, upper-alpha);
    counter-increment: my-badass-counter;
    margin-right: 5px;
    font-weight: bold;
}

예 : http://jsfiddle.net/xpAMU/1/


스타일을 적용 했습니까? 아니면 목록을 방해하는 다른 스타일 시트가 없습니까? 나는 시도 시도했다 :

<ol type="A">
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
<li><span class="label">Text</span></li>
</ol>

그런 다음 스타일 시트에서 :

ol {font-weight: bold;}
ol li span.label {font-weight:normal;}

그리고 굵게 A, B, C텍스트 등을하지.

(Opera 9.6, FF 3, Safari 3.2 및 IE 7에서 테스트)


이 질문이 조금 오래 여전히 많은 Google 검색에서 가장 먼저 나타납니다. (제 경우에는 액세스 권한이 없었습니다).

<ol type="A">
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">Text</span></p>
  </li>
  <li style="font-weight: bold;">
    <p><span style="font-weight: normal;">More text</span></p>
  </li>
</ol>


다음과 같이 할 수도 있습니다.

ol {
  font-weight: bold;
}

ol > li > * {
  font-weight: normal;
}

따라서 HTML에 "스타일"속성이 없습니다.


다음과 같이 할 수도 있습니다.

<ol type="A" style="font-weight: bold;">

<li style="padding-bottom: 8px;">****</li>

간단한 간단한 코드입니다.

이 코드는 "Mozilla, chrome 및 edge ..

참조 URL : https://stackoverflow.com/questions/862878/make-abc-ordered-list-items-have-bold-style

반응형