html - 括弧付きの下ローマ字リストが必要

Question

css の助けを借りて、このような出力を生成する必要があります...

(i) 需要は何か?

(ii) どのセグメント向けですか?

(iii) 革新的な...

(iv) 革新的な...

...等々。

提案してください。

Answer 1

counter-increment次のようにプロパティ .writeを使用してこれを実現できます。

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

これをチェックしてくださいhttp://jsfiddle.net/MEBxA/

IE8以降まで動作します。

Answer 2

In general, when you want numbering that is in any way different from the numbering styles that can be achieved simply by using list-style-type, you have basically two options:

1. Suppress the default numbering with list-style: none and generate the numbers using counters, generated content, and :before pseudo-element (as in sandeep’s answer).
2. Include the numbers in the content, possible using server-side techniques to generate them. Either suppress the default numbering for ul or (somewhat safer) do not use ul markup at all but e.g. div elements or table markup.

The simplest example of the latter approach:

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

In order to make it easy to style the rendering of the list as a whole, its items, and the numbers, it is better to use more verbose markup, perhaps up to this:

<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>

(Using blockquote and not div as outermost markup would greatly improve the fallback, i.e. non-CSS rendering, but it would probably cause accusations of “semantically wrong” markup.)