在 html 中显示列表和子列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5050843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
present lists and sublists in html
提问by vinnitu
how to organize html code (with usage ol\li ect.) to present such lists (with sublists)
如何组织 html 代码（使用 ol\li ect.）来呈现这样的列表（带有子列表）
1. BLA-BLA-BLA
1.1. Bla-bla-bla.
1.2. Bla-bla-bla.
1.3. Bla-bla-bla:
lalal - balalala;
lalal - balalala;
lalal - lalalla.
1.4. Blal-a lalslas
1.4.1. bklalala
1.4.2. sdsdsdsdsd
note: It is not the same that I want
注意：和我想要的不一样
回答by vaugham
oltag means ordered list (with numbers).
ol标签表示有序列表（带数字）。
ultag means unordered one.
ul标签表示无序的。
Overlapping ollists allow this kind of presentation : 1.1.2
重叠ol列表允许这种演示：1.1.2
<ol>
<li>BLA-BLA-BLA
<ol>
<li> Bla-bla-bla.</li>
<li> Bla-bla-bla.</li>
<li> Bla-bla-bla.
<ul>
<li>lalal - balalala;</li>
</ul>
</li>
</ol>
</li>
</ol>
回答by Bruno Jo?o
Your question is answered here
您的问题在这里得到解答
Achieving sub numbering on ol items html
The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.
以下样式表将嵌套列表项编号为“1”、“1.1”、“1.1.1”等。
OL { counter-reset: item }
OL>LI { display: block }
OL>LI:before { content: counters(item, ".") " "; counter-increment: item }
Maybe you can edit your question to avoid duplicating questions. Pointing to that one I just told you.
也许您可以编辑您的问题以避免重复问题。指着我刚刚告诉你的那个。
回答by shirish
ol {
counter-reset: section; /* Creates a new instance of the
section counter with each ol
element */
list-style-type: none;
}
li::before {
counter-increment: section; /* Increments only this instance
of the section counter */
content: counters(section, ".") " "; /* Combines the values of all instances
of the section counter, separated
by a period */
}
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>
Refer
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
Html ordered list 1.1, 1.2 (Nested counters and scope) not working
回答by Raul perez
try this example:
试试这个例子：
<ul class="list">
<ol>
<div class="white"><h3>White wines</h3></div>
<li>Pinot Grigio ~
<ol>
<li>Cavit<span>( Venezia )</span><em> </em></li>
<li>Santa Margherita<span>( Valdadige) /</span><em> </em></li>
<li>Livio Felluga<span>( Alto adige ) /</span><em> </em></li>
</ol>
</li>
</ol>
<ol>
<li>Lacryma Cristi ~
<ol>
<li>Mastroberardino<span>( Campania )/</span><em> </em></li>
</ol>
</li>
</ol>
<ol>
<li>Sauvinon Blanc ~
<ol>
<li>Fume blanc<span></span><em> </em></li>
<li>Kim crawford<span>( Malborough )/</span><em> </em></li>
</ol>
</li>
</ol>
<ul>
