99 votes

Liste ordonnée (HTML) en bas-alpha avec parenthèses de droite ?

Le type de liste alphabétique inférieure par défaut pour la liste ordonnée utilise un point '.'. Existe-t-il un moyen d'utiliser une parenthèse droite comme a)... b) ..etc ?

13voto

Fydo Points 586

en m'appuyant sur la réponse de DisgruntledGoat, je l'ai étendue pour prendre en charge les sous-listes et les styles selon mes besoins. Partageons-la ici au cas où ça aiderait quelqu'un.

https://jsfiddle.net/0a8992b9/ sorties :

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

4voto

themis Points 772

L'ajout de ceci au CSS a donné des résultats intéressants. C'était proche, mais pas de cigare.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Modifié pour inclure la solution d'Iazel, dans les commentaires -----

J'ai perfectionné votre solution :

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

L'arrière-plan et position: absolute ont fait l'affaire !

0voto

Roslan Amir Points 36

Cela semble fonctionner :

ol {
  counter-reset: list;
  margin: 0;
}

ol > li {
  list-style: none;
  position: relative;
}

ol > li:before {
  counter-increment: list;
  content: counter(list, lower-alpha) ") ";
  position: absolute;
  left: -1.4em;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X