La liste commandée peut-elle produire un résultat qui ressemble à 1.1, 1.2, 1.3 (au lieu de seulement 1, 2, 3, ...) avec css? [dupliquer]
cette question a déjà une réponse ici:
Peut une liste ordonnée produire des résultats qui ressemblent à 1.1, 1.2, 1.3 (au lieu de seulement 1, 2, 3, ...) avec CSS? Jusqu'à présent, l'utilisation de list-style-type:decimal n'a produit que 1, 2, 3, Pas 1.1, 1.2., 1.3.
10 réponses
vous pouvez utiliser counters pour ce faire:
les numéros de feuille de style suivants imbriqués comme "1", "1.1", "1.1.1", etc.
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
exemple
ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }<ol>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
<li>li element</li>
<li>li element
<ol>
<li>sub li element</li>
<li>sub li element</li>
<li>sub li element</li>
</ol>
</li>
</ol>Voir Imbriqués les compteurs et la portée pour plus d'informations.
aucune des solutions sur cette page ne fonctionne correctement et universellement pour tous les niveaux et les longs paragraphes (enveloppés). Il est très difficile d'obtenir une indentation cohérente en raison de la taille variable du marqueur (1., 1.2, 1.10, 1.10.5, ...); il ne peut pas être simplement "simulé", même avec une marge/capitonnage précalculé pour chaque niveau d'indentation possible.
j'ai finalement trouvé une solution que fonctionne réellement et n'a pas besoin de JavaScript.
testé sur Firefox 32, Chromium 37, IE 9 et Android Browser. Ça ne marche pas sur IE 7 et les précédentes.
CSS:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
exemple:
la réponse choisie est un bon début, mais elle force essentiellement list-style-position: inside; Style sur les éléments de la liste, ce qui rend le texte enveloppé difficile à lire. Voici une solution de contournement simple qui donne également le contrôle sur la marge entre le nombre et le texte, et aligne le nombre selon le comportement par défaut.
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counters(item, ".")".";
counter-increment: item;
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
JSFiddle: http://jsfiddle.net/3J4Bu/
Note: utiliser CSS counters pour créer une numérotation imbriquée dans un navigateur moderne. Voir la réponse acceptée. Ce qui suit est pour l'intérêt historique.
si le navigateur prend en charge content et counter ,
.foo {
counter-reset: foo;
}
.foo li {
list-style-type: none;
}
.foo li::before {
counter-increment: foo;
content: "1." counter(foo) " ";
}<ol class="foo">
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ol>les solutions affichées ici n'ont pas bien fonctionné pour moi, donc j'ai fait un mélange de celles de cette question et de la question suivante: est-il possible de créer une liste ordonnée à plusieurs niveaux en HTML?
/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
résultat:
Note: la capture d'écran, si vous souhaitez voir le code source ou quoi que ce soit dans ce message: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Sandro Alvares - KingRider">
</head>
<body>
<style type="text/css">
li.title {
font-size: 20px;
font-weight: lighter;
padding: 15px;
counter-increment: ordem;
}
.foo {
counter-reset: foo;
padding-left: 15px;
}
.foo li {
list-style-type: none;
}
.foo li:before {
counter-increment: foo;
content: counter(ordem) "." counter(foo) " ";
}
</style>
<ol>
<li class="title">TITLE ONE</li>
<ol class="foo">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="title">TITLE TWO</li>
<ol class="foo">
<li>text 2 one</li>
<li>text 2 two</li>
<li>text 2 three</li>
<li>text 2 four</li>
</ol>
<li class="title">TITLE THREE</li>
<ol class="foo">
<li>text 3 one</li>
<li>text 3 two</li>
<li>text 3 three</li>
<li>text 3 four</li>
</ol>
</ol>
</body>
</html>
résultat: http://i.stack.imgur.com/78bN8.jpg
j'ai un problème quand il y a deux listes et la deuxième est dans DIV Deuxième liste devrait commencer à 1. pas de 2.1
<ol>
<li>lorem</li>
<li>lorem ipsum</li>
</ol>
<div>
<ol>
<li>lorem (should be 1.)</li>
<li>lorem ipsum ( should be 2.)</li>
</ol>
</div>
http://jsfiddle.net/3J4Bu/364 /
EDIT: J'ai résolu le problème en ce http://jsfiddle.net/hy5f6161 /
j'avais besoin d'ajouter ceci à la solution postée dans 12 car j'utilisais une liste avec un mélange de liste ordonnée et des composants de listes non ordonnées. contenu: non-près-citation semble comme une chose étrange à ajouter, je sais, mais ça fonctionne...
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}
ce qui suit a fonctionné pour moi:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ") ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") ") ";
}
regardez: http://jsfiddle.net/rLebz84u/2 /
ou celle-ci http://jsfiddle.net/rLebz84u/3 / avec plus de texte et justifié
c'est le code approprié si vous voulez faire un premier enfant li redimensionner d'autres css.
<style>
li.title {
font-size: 20px;
counter-increment: ordem;
color:#0080B0;
}
.my_ol_class {
counter-reset: my_ol_class;
padding-left: 30px !important;
}
.my_ol_class li {
display: block;
position: relative;
}
.my_ol_class li:before {
counter-increment: my_ol_class;
content: counter(ordem) "." counter(my_ol_class) " ";
position: absolute;
margin-right: 100%;
right: 10px; /* space between number and text */
}
li.title ol li{
font-size: 15px;
color:#5E5E5E;
}
</style>
en fichier html.
<ol>
<li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
<ol class="my_ol_class">
<li>
<p>
my text 1.
</p>
</li>
<li>
<p>
my text 2.
</p>
</li>
</ol>
</li>
</ol>