Comment puis-je gauche aligner les nombres d'une liste ordonnée?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Changer le caractère suivant le nombre dans une liste ordonnée?
1) an item
Aussi est-il un CSS solution pour changer de numéros alphabétique/romain listes au lieu d'utiliser le type de l'attribut dans l'élément ol.
Je suis surtout intéressé par les réponses que le travail sur Firefox 3.
C'est la solution que j'ai de travailler dans Firefox 3, Opera et Google Chrome. La liste s'affiche toujours dans IE7 (mais sans fermer la parenthèse et à gauche aligner des chiffres):
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li:before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}
-->
</style>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>
EDIT: Inclus plusieurs ligne de fixer par strager
Aussi est-il un CSS solution pour changer de numéros alphabétique/romain listes au lieu d'utiliser le type de l'attribut dans l'élément ol.
Reportez-vous à list-style-type d'une propriété CSS. Ou lors de l'utilisation de compteurs de la deuxième argument accepte un list-style-type de la valeur. Par exemple, la suite d'utiliser des majuscules romaines:
li:before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Je pense que c'est une réponse qui répond à vos exigences:
<style type="text/css">
li {
list-style-position:inside;
margin-bottom:.5em;
}
li span {
float:left;
margin-left: 2em;
margin-top:-1.25em;
}
</style>
<ol start="8">
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ol>
Ressemble à ça sur FF3:
Le CSS pour le style de listes est ici, mais c'est en gros:
li {
list-style-type: decimal;
list-style-position: inside;
}
Cependant, la mise en page que vous êtes après, peut probablement être atteint que par l'fouiller dans les entrailles de la mise en page avec quelque chose comme ceci (notez que je n'ai même pas essayé):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Volé beaucoup d'autres réponses, mais cela fonctionne dans FF3 pour moi. Il a upper-roman, uniformes de mise en retrait, fermer la parenthèse.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Les numéros de ligne mieux si vous ajoutez à la pointe des zéros pour les nombres, par la mise en list-style-type :
ol { list-style-type: decimal-leading-zero; }
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.
