순서가 지정된 목록의 숫자를 굵게 표시하는 방법이 있습니까?
정렬 된 목록의 숫자 부분에만 일부 스타일을 첨부하는 CSS 선택기가 있습니까?
다음과 같은 HTML이 있습니다.
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
다음을 출력해야합니다.
1.a
2.b
3.c
1., 2., 3.을 굵게 만들고 a, b, c는 규칙적으로 남겨 둡니다.
<span>해결 방법을 알고 있습니다 ...
CSS
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
약 1 년 후, 앞으로 여기에 오는 다른 사람들에게도 흥미로울 수 있습니다.
또 다른 쉬운 가능성은 목록 항목 내용을 <p>, 스타일 <li>을 굵게 및 <p>일반 으로 감싸는 것 입니다. 이는 IA 관점에서 특히 <li>s가 하위 목록을 포함 할 수있는 경우 (텍스트 노드와 블록 수준 요소가 혼합되는 것을 방지하기 위해) 바람직합니다.
편의를위한 전체 예 :
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > p {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
</ol>
</body>
</html>
보다 일반적인 접근 방식을 선호하는 경우 ( <li>s와 같은 다른 시나리오에도 s 이외의 하위 항목이 포함 된 경우 <p>에도 적용 할 수 있습니다. li > *대신 li > p다음 을 사용할 수 있습니다 .)
<html>
<head>
<title>Ordered list items with bold numbers</title>
<style>
ol li {
font-weight:bold;
}
li > * {
font-weight:normal;
}
</style>
</head>
<body>
<ol>
<li>
<p>List Item 1</p>
</li>
<li>
<p>Liste Item 2</p>
<ol>
<li>
<p>Sub List Item 1</p>
</li>
<li>
<p>Sub List Item 2</p>
</li>
</ol>
</li>
<li>
<p>List Item 3.</p>
</li>
<li>
<code>List Item 4.</code>
</li>
</ol>
</body>
</html>
(여기에서 ol / li / code이고 ol / li / p / code가 아닌 목록 항목 4를 확인하십시오. 블록 수준 하위 항목을 일반 스타일로만 지정하려는 경우 선택기를 사용 li > *하지 말고 선택기를 사용하십시오. li *"foo <strong>bold word </strong>foo "와 같은 인라인 .
ol {
counter-reset: item;
}
ol li { display: block }
ol li:before {
content: counter(item) ". ";
counter-increment: item;
font-weight: bold;
}
뉴스 레터를 쓰는 동안 비슷한 문제가 발생했습니다. 그래서 저는 이런 식으로 스타일을 인라인해야했습니다.
<ol>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
<li style="font-weight:bold"><span style="font-weight:normal">something</span></li>
</ol>
이것은 dcodesmith의 답변 https://stackoverflow.com/a/21369918/1668200에 대한 업데이트입니다.
제안 된 솔루션은 텍스트가 더 길 때도 작동합니다 (예 : 줄 바꿈이 필요함) : Updated Fiddle
When you're using a grid system, you might need to do one of the following (at least this is true for Foundation 6 - couldn't reproduce it in the Fiddle):
- Add
box-sizing:content-box;to the list or its container - OR change
text-indent:-2em;to-1.5em
P.S.: I wanted to add this as an edit to the original answer, but it was rejected.
If you are using Bootstrap 4:
<ol class="font-weight-bold">
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
<li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li>
</ol>
The previous answer has a side effect that turns all types of lists numeric. <ol type="a"> will show 1. 2. 3. 4. rather than a. b. c. d.
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
/* Add support for non-numeric lists */
ol[type="a"] > li:before {
content: counter(item, lower-alpha) ".";
}
ol[type="i"] > li:before {
content: counter(item, lower-roman) ".";
}
The above code adds support for lowercase letters, lowercase roman numerals. At the time of writing browsers do not differentiate between upper and lower case selectors for type so you can only pick uppercase or lowercase for your alternate ol types I guess.
A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as
ol > li::marker {
font-weight: bold;
}
Unfortunately, it is currently only supported by Firefox 68 and up. (See Chrome Bug 457718 for Chrome/Blink status.)
You also could put around a,b,c and then bold the ul in the css.
EXAMPLE
ul {
font-weight:bold;
}
<ul><li><span style="font-weight:normal">a</span></li></ul>
Pretty late answer, but hopefully someone will find this useful
I had a situation like this:
List item
a. List item
Where the first item was <strong>, the sub-element was normal weight and the '1.' just wouldn't bold.
My solution was via jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($('ol').has('li').has('strong')) {
$('ol ').css('font-weight', 'bold');
$('ol > li > ol').css('font-weight', 'normal');
}
});
</script>
Hopefully this helps someone!
ReferenceURL : https://stackoverflow.com/questions/21369843/is-there-any-way-to-make-numbers-in-ordered-list-bold
'programing' 카테고리의 다른 글
| WPF TreeView HierarchicalDataTemplate-여러 자식 컬렉션이있는 개체에 바인딩 (0) | 2021.01.18 |
|---|---|
| Gnuplot 선 유형 (0) | 2021.01.17 |
| C # HashSet에 해당하는 JavaScript는 무엇입니까? (0) | 2021.01.17 |
| MSMQ (Microsoft Message Queuing) 란 무엇입니까? (0) | 2021.01.17 |
| div에서 innerHTML 제거 (0) | 2021.01.17 |