HTML订购列表没有显示子项

Question

问题

我想使用有序列表类型的交易：

1
  1.1
  1.2

2
  2.1
  2.2

但是当我得到代码from here时，它会为我做这件事：

1
  1.1
  1.1

2
  2.1
  2.1

所以，它没有正确编号。

---

代码

HTML

<ol id='doc'>
            <li>Test1
            <p>
            Test1-Detials
            </p>

                <ol>
                    <li>Test1.1
                        <p>
                        Test1.1-Detials
                        </p>
                    </li>
                </ol>

                <ol>
                    <li>Test1.2 (Displays as 1.1)
                        <p>
                        Test1.2-Detials
                        </p>
                    </li>
                </ol>
            </li>


            <li>Test2
            <p>
            Test2-Detials
            </p>

                    <ol>
                    <li>Test2.1
                        <p>
                        Test2.1-Details
                        </p>
                    </li>
                </ol>

                      <ol>
                    <li>Test2.2 (Displays as 2.1)
                        <p>
                        Test2.2-Details
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

所有HTML看起来都对我不对。

CSS

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item; text-decoration: underline; color: blue; font-size: 20px;}

我从链接中复制了那个strit，并添加了一点li:before：

 text-decoration: underline; color: blue; font-size: 20px;

如果还有其他任何方式，jQuery / JavaScript路由我很乐意接受它，但它有一个CSS答案，我也愿意接受它。

Answer 1

您的问题是您正在创建两个子列表而不是一个包含多个元素的子列表。

有关固定解决方案，请参阅http://jsfiddle.net/35kjA/。

本质上你的内心清单应该是：

<ol>
    <li>Test1.1
        <p>
        Test1.1-Detials
        </p>
    </li>

    <li>Test1.2 (Displays as 1.1)
        <p>
        Test1.2-Detials
        </p>
    </li>
</ol>