Kan een geordende lijst resultaten opleveren die eruitzien als 1.1, 1.2, 1.3 (in plaats van alleen 1, 2, 3, …) met CSS? Tot nu toe heeft het gebruik van list-style-type:decimalslechts 1, 2, 3 opgeleverd, niet 1.1, 1.2., 1.3.
Antwoord 1, autoriteit 100%
U kunt hiervoor tellersgebruiken:
De volgende typogramnummers geneste lijstitems als “1”, “1.1”, “1.1.1”, enz.
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
Voorbeeld
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>Antwoord 2, autoriteit 91%
Geen enkele oplossing op deze pagina werkt correct en universeel voor alle niveaus en lange (ingepakte) alinea’s. Het is erg lastig om een consistente inspringing te bereiken vanwege de variabele grootte van de markering (1., 1.2, 1.10, 1.10.5, …); het kan niet zomaar worden ‘vervalst’, zelfs niet met een vooraf berekende marge/opvulling voor elk mogelijk inspringniveau.
Ik heb eindelijk een oplossing gevonden die echt werkten geen JavaScript nodig heeft.
Het is getest op Firefox 32, Chromium 37, IE 9 en Android Browser. Werkt niet op IE 7 en eerder.
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, ".") " ";
}
Voorbeeld:
Probeer het op JSFiddle, fork het op Samenvatting.
Antwoord 3, autoriteit 21%
Het gekozen antwoord is een goed begin, maar het dwingt in wezen de stijl van list-style-position: inside;op de lijstitems, waardoor omwikkelde tekst moeilijk leesbaar wordt. Hier is een eenvoudige oplossing die ook controle geeft over de marge tussen het nummer en de tekst, en het nummer rechts uitlijnt volgens het standaardgedrag.
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/
Antwoord 4, autoriteit 5%
De hier geposte oplossingen werkten niet goed voor mij, dus ik deed een combinatie van die van deze vraag en de volgende vraag: Is het mogelijk om een multi-level geordende lijst in HTML te maken?
/* 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 */
Resultaat:
Opmerking: de screenshot, als je de broncode of wat dan ook uit dit bericht wilt zien: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
Antwoord 5, autoriteit 2%
Opmerking: gebruik CSS countersom geneste nummering te maken in een moderne browser. Zie het geaccepteerde antwoord. Het volgende is alleen voor historisch belang.
Als de browser contenten counterondersteunt,
.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>Antwoord 6
<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>
Resultaat:
http://i.stack.imgur.com/78bN8.jpg
Antwoord 7
Ik heb een probleem als er twee lijsten zijn en de tweede staat in DIV
Tweede lijst moet beginnen bij 1. niet 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/
BEWERKEN:
Ik heb het probleem hiermee opgelost
http://jsfiddle.net/hy5f6161/
Antwoord 8
Het volgende werkte voor mij:
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, ".") ") ";
}
Kijk naar: http://jsfiddle.net/rLebz84u/2/
of deze http://jsfiddle.net/rLebz84u/3/
met meer en uitgevulde tekst
Antwoord 9
dit is de juiste code als u eerst de grootte van andere CSS wilt wijzigen.
<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>
in html-bestand.
<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>
Antwoord 10
Ik was na het toevoegen van een genummerde lijst aan Python Markdown‘s TOC-extensie.
Ik heb zoiets als dit gedaan:
.toc ul { counter-reset: outItem; list-style: none }
.toc ul > li{ counter-reset: nestedItem }
.toc ul > li:before { content: counters(outItem, ".") ". "; counter-increment: outItem; margin-left: -2em; }
Ik weet niet zeker of het de juiste manier is, maar het werkte voor mij.
Antwoord 11
Ik moest dit toevoegen aan de oplossing die in 12 werd gepost, omdat ik een lijst gebruikte met een combinatie van geordende en ongeordende lijstencomponenten. inhoud: geen-close-quote lijkt vreemd om toe te voegen, ik weet het, maar het werkt…
ol ul li:before {
content: no-close-quote;
counter-increment: none;
display: list-item;
margin-right: 100%;
position: absolute;
right: 10px;
}