Liste romaine inférieure avec parenthèses requise

Question

J'ai besoin de générer un résultat comme celui-ci à l'aide de css...

(i) Quelle est la demande ?

(ii) Pour quel(s) segment(s) ?

(iii) Compte tenu de l'innovation...

(iv) Compte tenu de l'innovation...

... et ainsi de suite.

Veuillez nous suggérer.

Answer 1

Pour ce faire, vous pouvez utiliser counter-increment propriété .write comme ceci :

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

Vérifier ceci http://jsfiddle.net/MEBxA/

Il fonctionne jusqu'à IE8 et au-delà.

Answer 2

En général, lorsque vous souhaitez une numérotation différente des styles de numérotation qui peuvent être obtenus en utilisant simplement la fonction list-style-type vous avez essentiellement deux options :

1. Supprimer la numérotation par défaut avec list-style: none et générer les nombres à l'aide de compteurs, de contenu généré et de :before pseudo-élément (comme dans la réponse de Sandeep).
2. Inclure les chiffres dans le contenu, en utilisant éventuellement des techniques côté serveur pour les générer. Supprimer la numérotation par défaut pour les ul ou (plus sûr) ne pas utiliser ul mais par exemple div ou table balisage.

L'exemple le plus simple de cette dernière approche :

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

Afin de faciliter le rendu de la liste dans son ensemble, de ses éléments et des nombres, il est préférable d'utiliser un balisage plus verbeux, pouvant aller jusqu'à ceci :

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

(Utilisation de blockquote et non div en tant que balisage le plus extérieur améliorerait grandement le rendu de secours, c'est-à-dire non CSS, mais il serait probablement accusé de balisage "sémantiquement erroné").