[英]Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, …) with css?
使用 CSS 的有序列表能否產生看起來像 1.1、1.2、1.3（而不僅僅是 1、2、3、...）的結果？ 到目前為止，使用list-style-type:decimal只產生了 1, 2, 3，而不是 1.1, 1.2., 1.3。
您可以使用計數器來執行此操作：
以下樣式表將嵌套列表項編號為“1”、“1.1”、“1.1.1”等。
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
示例
ol { counter-reset: item } li{ display: block } li:before { content: counters(item, ".") " "; counter-increment: item }
<ol> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> <li>li element</li> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> </ol>
有關更多信息，請參閱嵌套計數器和范圍。
此頁面上的所有解決方案均不適用於所有級別和長（換行）段落。 由於標記的可變大小 (1., 1.2, 1.10, 1.10.5, ...)，實現一致的縮進真的很棘手； 它不能只是“偽造”，甚至不能為每個可能的縮進級別預先計算邊距/填充。
我終於找到了一個真正有效並且不需要任何 JavaScript 的解決方案。
它在 Firefox 32、Chromium 37、IE 9 和 Android 瀏覽器上進行了測試。 不適用於 IE 7 及更早版本。
CSS：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
示例：
選擇的答案是一個很好的開始，但它本質上是強制list-style-position: inside; 列表項上的樣式，使包裝的文本難以閱讀。 這是一個簡單的解決方法，它還可以控制數字和文本之間的邊距，並根據默認行為右對齊數字。
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle： http : //jsfiddle.net/3J4Bu/
這里發布的解決方案對我來說效果不佳，所以我混合了這個問題和以下問題： 是否可以在 HTML 中創建多級有序列表？
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
結果：
注意：截圖，如果你想查看源代碼或來自這篇文章的任何內容： http : //estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
注：使用CSS counter s在現代瀏覽器中創建嵌套的編號。 請參閱已接受的答案。 以下內容僅供歷史興趣。
如果瀏覽器支持content和counter ，
.foo { counter-reset: foo; } .foo li { list-style-type: none; } .foo li::before { counter-increment: foo; content: "1." counter(foo) " "; }
<ol class="foo"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> </ol>
在不久的將來，您也許可以使用::marker偽元素在一行代碼中獲得與其他解決方案相同的結果。
請記住檢查瀏覽器兼容性表，因為這仍然是一項實驗性技術。 目前只支持 Firefox 和 Firefox for Android，從 68 版開始支持這個。
這是一個片段，如果在兼容的瀏覽器中嘗試，它將正確呈現：
::marker { content: counters(list-item,'.') ':' } li { padding-left: 0.5em }
<ol> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> <li>li element</li> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> </ol>
您可能還想通過 smashingmagazine查看有關該主題的這篇很棒的文章。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
當有兩個列表並且第二個在 DIV 中時，我遇到了一些問題 第二個列表應該從 1 開始，而不是 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364/
編輯：我通過這個http://jsfiddle.net/hy5f6161/解決了這個問題
我需要將此添加到 12 中發布的解決方案中，因為我使用的是一個混合了有序列表和無序列表組件的列表。 內容：沒有關閉引用似乎是一件奇怪的事情，我知道，但它有效......
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
以下對我有用：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
看： http : //jsfiddle.net/rLebz84u/2/
或者這個http://jsfiddle.net/rLebz84u/3/帶有更多和合理的文本
如果您想首先調整其他 css 的孩子 li 的大小，這是正確的代碼。
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
在 html 文件中。
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>
我是在將編號列表添加到Python Markdown的TOC 擴展之后。
我做了這樣的事情：
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
我不確定這是正確的方法，但它對我有用。
如何使用 css 和 html 對產生從 1.1、1.2、1.3（而不僅僅是 1、2、3）開始的結果的列表進行排序
[英]How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html
如何制作有序列表 go 1. 1.1, 1.2, A, B, C, 1.3, 1.4
[英]How can I make an ordered list go 1. 1.1, 1.2, A, B, C, 1.3, 1.4
Html 有序列表 1.1、1.2（嵌套計數器和范圍）不起作用
[英]Html ordered list 1.1, 1.2 (Nested counters and scope) not working
使用CSS樣式化的OL列表的文本換行是點分列表，例如1.1、1.2、1.3等
[英]Text wrap for OL lists styled using CSS to be dotted lists, e.g. 1.1, 1.2, 1.3, etc
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.