Come posso allineare a sinistra i numeri in un elenco ordinato?
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
Modificare il carattere dopo il numero in un elenco ordinato?
1) an itemInoltre esiste una soluzione CSS per passare da numeri a elenchi alfabetici / romani invece di utilizzare l'attributo type sull'elemento ol.
Sono principalmente interessato alle risposte che funzionano su Firefox 3.
Risposte:
Questa è la soluzione che ho in Firefox 3, Opera e Google Chrome. L'elenco viene ancora visualizzato in IE7 (ma senza la parentesi quadra e i numeri di allineamento a sinistra):
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;
}<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: inclusa la correzione di più righe di strager
Inoltre esiste una soluzione CSS per passare da numeri a elenchi alfabetici / romani invece di utilizzare l'attributo type sull'elemento ol.
Fare riferimento alla proprietà CSS di tipo elenco . Oppure, quando si usano i contatori, il secondo argomento accetta un valore di tipo list-style. Ad esempio, il codice seguente utilizzerà il carattere maiuscolo:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
Il CSS per gli elenchi di stili è qui , ma è fondamentalmente:
li {
list-style-type: decimal;
list-style-position: inside;
}
Tuttavia, il layout specifico che stai dopo può probabilmente essere raggiunto solo approfondendo le interiora del layout con qualcosa come questo (nota che non ho davvero provato):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Puoi anche specificare i tuoi numeri nell'HTML, ad esempio se i numeri vengono forniti da un database:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>L' seqattributo è reso visibile utilizzando un metodo simile a quello fornito in altre risposte. Ma invece di usare content: counter(foo), usiamo content: attr(seq).
value="4A", poiché non funzionerà. Inoltre, l'attributo value può funzionare con l' typeattributo, ma il valore deve comunque essere un numero (poiché funziona all'interno di un insieme ordinato).
reversedattributo è solo html5, come si usa il valuedi li). Invece di usare il tuo, seqho impostato un valuee ho usato attr(value)invece diattr(seq)
Ho rubato molto di questo da altre risposte, ma per me funziona in FF3. Ha upper-roman, rientranza uniforme, una parentesi stretta.
<!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>
Suggerisco di giocare con l'attributo: before e vedere cosa puoi ottenere con esso. Significa che il tuo codice è davvero limitato ai nuovi browser interessanti ed esclude la sezione (fastidiosamente grande) del mercato che utilizza ancora vecchi browser spazzatura,
Qualcosa di simile al seguente, che forza un fisso con sugli elementi. Sì, lo so che è meno elegante dover scegliere la larghezza da soli, ma usare CSS per il layout è come un lavoro di polizia sotto copertura: per quanto buone siano le tue motivazioni, diventa sempre disordinato.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Ma dovrai sperimentare per trovare la soluzione esatta.
I numeri si allineano meglio se aggiungi gli zeri iniziali ai numeri, impostando list-style-type su:
ol { list-style-type: decimal-leading-zero; }valueattributo (non è necessario CSS)I browser moderni interpreteranno l' valueattributo e lo visualizzeranno come previsto. Vedere la documentazione MDN .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>Anche dare un'occhiata a l' <ol>articolo su MDN , in particolare la documentazione per l' starte attributo.
Ho preso in prestito e migliorato la risposta di Marcus Downing . Testato e funziona in Firefox 3 e Opera 9. Supporta anche più righe.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}C'è l' attributo Type che ti permette di cambiare lo stile di numerazione, tuttavia, non puoi cambiare il punto dopo il numero / la lettera.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>I documenti dicono in merito list-style-position: outside
CSS1 non ha specificato la posizione precisa del riquadro del marker e per motivi di compatibilità, CSS2 rimane ugualmente ambiguo. Per un controllo più preciso delle caselle dei marker, utilizzare i marker.
Più in alto in quella pagina c'è la roba sui marcatori.
Un esempio è:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}No ... usa solo un DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}Ce l'ho. Prova quanto segue:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>Il problema è che questo sicuramente non funzionerà su browser meno recenti o meno conformi: display: inline-blockè una proprietà nuovissima.
Soluzione alternativa rapida e sporca . È possibile utilizzare un carattere di tabulazione insieme al testo preformattato. Ecco una possibilità:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>e il tuo html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>Nota che lo spazio tra il litag e l'inizio del testo è un carattere di tabulazione (quello che ottieni quando premi il tasto Tab all'interno del blocco note).
Se devi supportare browser meno recenti, puoi farlo invece:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>Le altre risposte sono migliori da un punto di vista concettuale. Tuttavia, puoi semplicemente inserire i numeri con il numero appropriato di "& ensp;" per farli allineare.
* Nota: all'inizio non ho riconosciuto che veniva utilizzato un elenco numerato. Pensavo che l'elenco fosse stato generato esplicitamente.
Darò qui il tipo di risposta che di solito non mi piace leggere, ma penso che poiché ci sono altre risposte che ti dicono come ottenere ciò che vuoi, potrebbe essere bello ripensare se ciò che stai cercando di ottenere è davvero una buona idea.
Innanzitutto, dovresti pensare se è una buona idea mostrare gli articoli in un modo non standard, con un carattere di separazione diverso da quello fornito.
Non ne conosco le ragioni, ma supponiamo che tu abbia buone ragioni.
I modi qui proposti per ottenere che consistono nell'aggiungere contenuto al tuo markup, principalmente attraverso il CSS: prima della pseudoclasse. Questo contenuto sta davvero modificando la tua struttura DOM, aggiungendovi quegli elementi.
Quando si utilizza la numerazione "ol" standard, si avrà un contenuto renderizzato in cui il testo "li" è selezionabile, ma il numero che lo precede non è selezionabile. Cioè, il sistema di numerazione standard sembra essere più "decorazione" che contenuto reale. Se aggiungi contenuto per i numeri utilizzando ad esempio i metodi ": before", questo contenuto sarà selezionabile e grazie a ciò, eseguendo problemi di copia / incolla indesiderati o problemi di accessibilità con lettori di schermo che leggeranno questo contenuto "nuovo" in aggiunta al sistema di numerazione standard.
Forse un altro approccio potrebbe essere quello di modellare i numeri usando le immagini, anche se questa alternativa porterà i suoi problemi (numeri non mostrati quando le immagini sono disabilitate, dimensione del testo per il numero non cambia, ...).
Comunque, il motivo di questa risposta non è solo quello di proporre questa alternativa "immagini", ma di far riflettere sulle conseguenze del tentativo di cambiare il sistema di numerazione standard per le liste ordinate.
Questo codice rende lo stile di numerazione uguale alle intestazioni del contenuto li.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>