Comment ajouter des crochets (a) à la liste ordonnée? compatible sur tous les navigateurs

J'ai à vous montrer comme

(a)

(b)

(c)

Mise à jour:

J'ai trouvé un CSS façon

ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

mais il fonctionne pas sous IE 7 et inférieur.

pourquoi downvote pour cela?
Ceux qui sont entre parenthèses, pas de crochets. 😉
Bien que vous avez compris. La modification de la question après le fait n'est pas bien quand même. Cela donnera IE peu plus de possibilités, mais il ne comprend pas counter: code.google.com/p/ie7-js je pense que vous êtes la plupart du temps hors de la chance.
j'étais aussi à la recherche de IE7.js mais ce n'est pas montrer le soutien 🙁 pour counters ie7-js.googlecode.com/svn/test/index.html
quoi? "Entre parenthèses" et "supports" sont deux mots qui signifient exactement la même chose.
Pas "exactement la même chose," mais après enquête, les deux peuvent être utilisés de façon interchangeable dans le royaume-UNI: en.wikipedia.org/wiki/Bracket
Ici vous avez une solution élégante, qui utilise CSS compteurs.

InformationsquelleAutor Jitendra Vyas | 2010-04-01

9

Cela est possible avec des compteurs personnalisés, mais au moins IE7 - ne le supporte pas, d'autres le pourraient pas non plus. Voir ici pour les détails: http://www.quirksmode.org/css/counter.html

Ex:
```
li:before {
    content: "(" counter(mycounter,lower-latin) ")";
}
```
- mais j'ai besoin sur ol parce que c'est une liste triée
- Ensuite, vous aurez besoin de modifier le CSS en conséquence, ce n'est qu'un exemple. Je suis juste de vous diriger dans la bonne direction, vous aurez pour coder vous-même.
InformationsquelleAutor deceze

J'utilise ce bout de code dans mediawiki avec CSS activé. Je ne suis pas sûr si cela va fonctionner dans les anciennes versions d'IE...

{{#css:
  .laparent ol { counter-reset: item }
  .laparent li { display: block ; counter-increment: item; }
  .laparent li:before { content: " ("counter(item,lower-alpha)") "; }
}}
<ol class=laparent>
   <li> this is the first item;
   <li> this is the second item; or
   <li> this is the third item.
</ol>

Sorties:

(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.

Vous devez formater votre réponse et de décrire ce que vous faites. Il peut sembler tout droit pour vous, mais vous pouvez vous permettre quelques mots expliquant
A noté, merci Ted.

InformationsquelleAutor Allan

1

Depuis CSS3 le problème semble résolu:
```
style="list-style-type: parenthesized-lower-latin;"
```
http://www.w3.org/TR/2011/WD-css3-lists-20110524/

InformationsquelleAutor Olivier
0

Vous ne pouvez pas obtenir (a) (b) (c).

Vous peut toutefois obtenir la lettre sans les parenthèses:

<ul style="list-style-type: lower-latin;">...</ul>

Voir http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all
- je sais comment obtenir des lettres sans support. j'ai demandé à la question de savoir comment ajouter le support. je pense que personne ne l'option 🙁
InformationsquelleAutor Amy B
0

Ce sont vos options selon le W3C.

Avec CSS, il n'est pas possible. Vous devez faire une liste personnalisée à l'aide de javascript (ou similaire).

InformationsquelleAutor jay
0

Il n'y a pas de façon de le faire. Ce qui signifie que vous pénétrez sur les terres de (plaisir) hacks.

Vous pourriez essayer une image d'arrière-plan de deux parenthèses.

InformationsquelleAutor roufamatic

J'ai plutôt fait des paragraphes. Je l'ai mise en retrait du paragraphe, puis sorti de la première ligne, à l'aide d'un texte-tiret et numérotée moi-même.

.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}

<div class="list_indent">  
<p> (1)&nbsp;&nbsp;The recruitment report and a copy of the blah and blah and blah and blah and blah and blah and blah and blah.;
</p>   
<p> (2)&nbsp;&nbsp;A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>     
<p> (3)&nbsp;&nbsp;Recruitment.
</p>   
</div>

InformationsquelleAutor daniel kessler

Ou vous pouvez simplement ajouter le nombre de texte manuellement sans avoir yo vous soucier de navigateur de base. Fonctionne dans n'importe quel navigateur!

CSS:

ul.abc-list {
  list-style: none;
  padding-left: 30px;
}
ul.abc-list > li > span.counter {
  position: absolute;
  margin-left: -20px;
  /*if you want to right align the text
   * 
   * width: 15px;
   * text-align: right;
   */
}

HTML:

<ul class="abc-list">
  <li><span class="counter">a)</span> One</li>
  <li><span class="counter">b)</span> Two</li>
  <li><span class="counter">c)</span> Three</li>
  <li><span class="counter">d)</span> Four</li>
  <li><span class="counter">e)</span> Five</li>
  <ul>

InformationsquelleAutor Lasithds

Vous devez vous connecter pour publier un commentaire.