如何使用css和html命令产生看起来像1.1,1.2,1.3(而不仅仅是1,2,3)的结果的列表?
到目前为止输出为,
对于以下代码,
HTML:
<ol> <li>Lorem ipsum.</li> <li>Excepteur sint occaecat cupidatat non proident: <ol> <li>sunt in culpa qui officia,</li> <li>deserunt mollit anim id est laborum.</li> </ol> </li> <li>Ut enim ad minim veniam. <ol> <li>Quis nostrud exercitation.</li> <li>Ullamco laboris nisi ut. <ol> <li> Duis aute irure dolor </li> </ol> </li> </ol> </li>
CSS:
ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } li { display: table; counter-increment: item; margin-bottom: 0.6em; } li:before { content: counters(item,".") ". "; display: table-cell; padding-right: 0.6em; } li li { margin: 0; } li li:before { content: counters(item,".") " "; }
但我需要得到结果,
得到答案,参考JSfiddle