2012-04-12 10 views
2

htmlの利用規約ページを作成する必要がありますので、私はそれらに番号を付ける必要がありますが、いくつかの条件にはサブポイントがありますので、下の例のように表示します。htmlのオーダーリスト

  1. 私を最初の点

    1.1と私サブ点

  2. 私は、第二の点

  3. 私は第三の点

  4. 私は記載

    4.1と私はサブポイントン

は、あなたがCSSのカウンターでそれを行うことができ、それらをCSS

<style> 
ol {list-style:decimal} 


</style> 
</head> 

<body> 
<ol> 

<li>me the first point 
<ol><li>me the sub point</li></ol> 

</li> 
<li>me the second point</li> 
<li>me the third point</li> 
<li>me the forth point</li> 


</ol> 

</body> 
+0

ここで回答を見つけることができます - http://stackoverflow.com/questions/956178/html-css-outline-numberingまたはこちら - http://stackoverflow.com/questions/1852816/nested-ordered-lists –

答えて

3

これには、というカウンタインクリメントのCSS を使用できます。このように書きます:

body{ 
    counter-reset: chapter 0; 
} 
li{ 
    counter-reset: sub-chapter 0; 
    margin-left:20px; 
    position:relative; 
} 
li:before{ 
    counter-increment: chapter; 
    content: counter(chapter) ". "; 
} 
li li:before{ 
    counter-increment: sub-chapter; 
    content: counter(chapter) "." counter(sub-chapter) ": "; 
} 
li:before{ 
    position:absolute; 
    left:-20px; 
} 

このhttp://jsfiddle.net/gNqXL/

を確認してくださいそれはIE8以上&まで仕事です。

1

私は、これはあなたの条件に合うと思う代わりに、動的に生成するのでマニュアル順序を使用することをお勧めします。

http://caniuse.com/#search=counter

See example

これはまともな方向に向けるかもしれません。

0

CSSはこれを行うことができます。だから、

関連する問題