2012-05-10 11 views
2

このような出力をCSSの助けを借りて生成する必要があります...括弧付きのローマンリストが必要

(i)要望は何ですか?

(ii)どのセグメントについてですか?

(III)を考えると、革新的な...

(IV)の革新的な...

...というように考えます。

お勧めします。

答えて

4

あなたはこのようcounter-incrementプロパティ.WRITEでこれを達成することができます。このhttp://jsfiddle.net/MEBxA/

それはIE8以上&まで仕事だ

ul{ 
    counter-reset:item; 
    list-style:none; 
} 
li:before  { 
    content: "("counter(item, lower-roman) ")"; 
    counter-increment: item; 
} 

チェック。一般的に

+1

マークアップは 'ol'ではなく、 'ol'がこのケースの' ul'(箇条書きリスト)より良いフォールバック(通常は番号付きリスト)を与えるからです。 –

+0

これは問題ではありません。なぜなら、このオペレーションでは、よりローマ字の括弧を必要とするからです。 – sandeep

+1

?かっこは、「ol」か「ul」のどちらを選択するかによって何をしなければなりませんか? – BoltClock

1

、あなたはそれがどのような方法でlist-style-typeを使用することによって簡単に達成することができナンバリングのスタイルが異なる番号付けたいとき、あなたは基本的に2つのオプションがあります。

  1. list-style: noneと番号のデフォルトを抑制し、発生をカウンター、生成されたコンテンツ、および疑似要素を使用する数字(sandeepの回答のように)。
  2. 数字をコンテンツに含めます。数字は、サーバー側の手法を使って生成することができます。 ulの既定の番号付けを無効にするか、(やや安全な)ulマークアップを使用しないでください。 div要素またはtableマークアップ。

後者のアプローチの最も単純な例:それは簡単に、リスト全体のレンダリング、その項目、および番号のスタイルを作るためには

(i) What is the demand?<br> 
(ii) For what segment(s)?<br> 
… 

、使用することをお勧めしますおそらくこれまでより冗長なマークアップ、:

<div class=ol> 
<div class=li><span class=num>(i)</span> What is the demand?</div> 
<div class=li><span class=num>(ii)</span> For what segment(s)?</div> 
… 
</div> 

(最も外側のマークアップとしてなくdivを使用すると、大幅にフォールバックを改善する、すなわち、非CSSのレンダリングが、それはおそらく、ACCUを引き起こします