如何创建 1.1, 1.2 1.3 ... HTML 列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3635955/
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
How to create a 1.1, 1.2 1.3 ... HTML list?
提问by medusa
I want to create HTML nested lists that has the following format:
我想创建具有以下格式的 HTML 嵌套列表：
1
1.1
1.2
1.3
1.4
2
2.1
I tried a solution that I found on the internet:
我尝试了我在互联网上找到的解决方案：
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }
But it didnt work for me. Any help please??
但它对我不起作用。请问有什么帮助吗？？
If the counter solution is too complicated, is there a way to fake the nested list effect, by writing them manually but being sure that the formatting looks like a real list
如果计数器解决方案太复杂，有没有办法通过手动编写它们来伪造嵌套列表效果，但要确保格式看起来像一个真正的列表
EDIT
编辑
need full IE6 support
需要完整的 IE6 支持
采纳答案by Matthew Rygiel
This should work. It is a bad way to do this but if you MUST support IE6 not much choice.
这应该有效。这是一种糟糕的方法，但如果您必须支持 IE6，则没有太多选择。
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> Item</li>
<li><span>1.2</span> Item</li>
<li><span>1.3</span> Item</li>
<li><span>1.4</span> Item</li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
with css
用CSS
ol {list-style:none;}
After your comment I've redone it a bit.
在您发表评论后，我重做了一点。
<ol>
<li><span>1</span> Item
<ol>
<li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
<li><span>1.4</span> <p>Item</p></li>
</ol>
</li>
<li><span>2</span> Item
<ol>
<li><span>2.1</span> Item</li>
</ol>
</li>
</ol>
And the css would be
而 css 将是
ol {list-style:none;}
ol li span
{
display: block;
float: left;
width: 30px;
}
ol li
{
clear:both;
width: 400px;
}
ol li p
{
float: left;
width: 370px;
margin: 0;
}
You may have to adjust the widths.
您可能需要调整宽度。
回答by Jerad Mahesha
this answer is for the first question. I suggest use this method if you are not going below IE8 (IE7 => ?). for below IE7 you can use same logic with jquery.
这个答案是针对第一个问题。如果您不低于 IE8（IE7 => ？），我建议使用此方法。对于低于 IE7，您可以对 jquery 使用相同的逻辑。
Original Post from
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp
来自http://www.w3schools.com/cssref/pr_gen_counter-reset.asp 的原始帖子
CSS
CSS
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
counter-increment:section;
content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
HTML
HTML
<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
<ul>
<li>Birds</li>
<li>Rats</li>
</ul>
</li>
<li>Rabbits</li>
<li>Ants
<ul>
<li>Lions</li>
<li>Rats</li>
</ul>
</li>
<li>Ducks</li>
回答by Diego
The before element doesn't work in IE6, but it's the correct way of doing it. I'd recommend using IE7.js, a javascript library that makes IE6 behave like IE7 where javascript and CSS are concerned. Another way could be using a javascript hack that runs only if the browser is IE6 and traverses de DOM modifying the list items...
before 元素在 IE6 中不起作用，但它是正确的做法。我建议使用IE7.js，这是一个 javascript 库，它使 IE6 的行为类似于 IE7，其中涉及 javascript 和 CSS。另一种方法可能是使用仅在浏览器是 IE6 时运行的 javascript hack 并遍历 de DOM 修改列表项...
In For A Beautiful Webyou can find more information regarding IE6-compatible websites.
在For A Beautiful Web 中，您可以找到有关 IE6 兼容网站的更多信息。
回答by Cubiczx
You can use countersto do so:
您可以使用计数器来执行此操作：
Example
例子
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>回答by Mike
This example uses IE6-specific CSS attribute behaviorto add a static marker before each li. There must be some MS specific magic that can replace a static dash with a counter.
此示例使用 IE6 特定的 CSS 属性behavior在每个li. 必须有一些特定于 MS 的魔法可以用计数器代替静态冲刺。
If you want it to be a CSS solution, use this as a starting point and then google "MSDN".
如果您希望它成为 CSS 解决方案，请将此作为起点，然后在 google 上搜索“MSDN”。
ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
margin: 0.5em 0; padding: 0 0 0 20px;
list-style-type: none;
behavior: expression( !this.before
? this.before = this.innerHTML = '— ' + this.innerHTML : '' );
text-indent: -1.24em;
}
ul.example li:before { content: '14\a0'; }
回答by Bobby Hyman
Works perfectly for me, in FF 3.6.6, so:
在 FF 3.6.6 中非常适合我，所以：
- Which browser is it not working in?
- What does your markup look like (i.e. are you nesting the lists correctly)?
- 它在哪个浏览器中不起作用？
- 您的标记是什么样的（即您是否正确嵌套了列表）？
