2015-10-08 49 views
0

是否可以按以下格式排列我的排序列表?HTML排序列表格式化

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 

这可能吗? 谢谢

+0

这可能会有帮助。 http://stackoverflow.com/questions/4615500/how-to-start-a-new-list-continuing-the-numbering-from-the-previous-list – dommer

+0

这已经在这里回答:http:// stackoverflow。 com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1 –

回答

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>

+0

@ user3054465:让我知道如果这个帮助你。 – user1012181

+0

这不能解决列表项之间的标题。 –

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>