HTML有序列表格式

时间:2015-10-08 17:15:09

标签: html css format

是否可以按以下格式订购我的有序列表?

heading
1.1. text...
1.2. text
1.2.1 text

Another heading
1.3. text
1.3.1. text
1.3.2. text
1.4. text

这可能吗? 谢谢

2 个答案:

答案 0 :(得分:2)



ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
    <li> Cat</li>
    <li>Bat</li>
    <li>Mat
        <ol>
            <li>Red Mat</li>
            <li>Green Mat</li>
        </ol>
    </li>
    <li>Pat</li>
    
</ol>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

.contract ol {
    counter-reset: item
}
.contract li.paragraph {
    counter-increment: item;
}
.contract li li.paragraph:before {
    content: counters(item, ".")" ";
}
.contract li {
    list-style-type: none;
}
.contract ol {
    padding-left: 0;
}
<section class="contract">
    <ol>
        <li class="paragraph">
            <ol>
                <li>
                     <h2>Heading</h2>

                </li>
                <li class="paragraph">text</li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li>
                     <h2>Another heading</h2>

                </li>
                <li class="paragraph">text
                    <ol>
                        <li class="paragraph">text</li>
                        <li class="paragraph">text</li>
                    </ol>
                </li>
                <li class="paragraph">text</li>
            </ol>
        </li>
    </ol>
</section>