Come puoi personalizzare i numeri in un elenco ordinato?
https://stackoverflow.com/questions/10877
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
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
Cambiare il carattere dopo il numero in un elenco ordinato?
1) an item
Esiste anche una soluzione CSS per passare dai numeri agli elenchi alfabetici/romani invece di utilizzare l'attributo type sull'elemento ol.
Sono principalmente interessato alle risposte che funzionano su Firefox 3.
Soluzione
Questa è la soluzione che ho lavorando in Firefox 3, Opera e Google Chrome.L'elenco viene ancora visualizzato in IE7 (ma senza la parentesi di chiusura 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>MODIFICARE: Correzione di più linee inclusa da parte di Strager
Esiste anche una soluzione CSS per passare dai numeri agli elenchi alfabetici/romani invece di utilizzare l'attributo type sull'elemento ol.
Fare riferimento a tipo di stile elenco Proprietà CSS.Oppure, quando si utilizzano i contatori, il secondo argomento accetta un valore di tipo stile elenco.Ad esempio, quanto segue utilizzerà il romano superiore:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
Altri suggerimenti
Il CSS per gli elenchi di stili è Qui, ma sostanzialmente è:
li {
list-style-type: decimal;
list-style-position: inside;
}
Tuttavia, il layout specifico che stai cercando può probabilmente essere ottenuto solo approfondendo le viscere del layout con qualcosa come Questo (nota che in realtà non l'ho 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 es.se i numeri vengono forniti da un database:
<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>
IL seq l'attributo è reso visibile utilizzando un metodo simile a quello fornito in altre risposte.Ma invece di usare content: counter(foo), noi usiamo content: attr(seq):
ol {
list-style: none;
}
ol > li:before {
content: attr(seq) ". ";
}
Ho rubato molto da altre risposte, ma per me funziona in FF3.Esso ha upper-roman, rientro uniforme, parentesi chiusa.
<!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 di vedere cosa puoi ottenere con esso.Significherà che il tuo codice è davvero limitato ai nuovi browser carini ed esclude la sezione (fastidiosamente ampia) del mercato che utilizza ancora browser vecchi e scadenti,
Qualcosa di simile al seguente, che impone un valore fisso sugli elementi.Sì, lo so, è meno elegante dover scegliere tu stesso la larghezza, ma usare i CSS per il tuo layout è come un lavoro di polizia sotto copertura:per quanto buone siano le tue motivazioni, diventa sempre complicato.
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 tipo di stile elenco A:
ol { list-style-type: decimal-leading-zero; }
Preso in prestito e migliorato La risposta di Marcus Downing.Testato e funziona con Firefox 3 e Opera 9.Supporta anche più linee.
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'è la Attributo tipo che ti consente di modificare lo stile di numerazione, tuttavia, non puoi modificare il punto dopo il numero/lettera.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
I documenti dicono riguardo list-style-position: outside
I CSS1 non hanno specificato la posizione precisa del riquadro indicatore e, per ragioni di compatibilità, i CSS2 rimangono ugualmente ambigui.Per un controllo più preciso delle caselle dei marcatori, utilizzare i marcatori.
Più in alto nella pagina c'è la roba sui marcatori.
Un esempio è:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
No...basta usare 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 è questo decisamente non funzionerà su browser più vecchi o meno conformi: display: inline-block è una struttura nuovissima.
Veloce e sporco soluzione alternativa.È 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>
Si noti che lo spazio tra i li tag e l'inizio del testo è un carattere di tabulazione (ciò che ottieni quando premi il tasto tab nel blocco note).
Se hai bisogno di 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 " " per allinearli.
* Nota:All'inizio non mi resi conto 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 desideri, potrebbe essere carino riconsiderare se ciò che stai cercando di ottenere è davvero una buona idea.
Innanzitutto, dovresti pensare se è una buona idea mostrare gli elementi in modo non standard, con un carattere separatore diverso da quello fornito.
Non ne conosco le ragioni, ma supponiamo che tu abbia delle buone ragioni.
I modi qui proposti per raggiungere questo obiettivo consistono nell'aggiungere contenuto al markup, principalmente attraverso la pseudoclasse CSS :before.Questo contenuto sta davvero modificando la struttura del tuo DOM, aggiungendovi quegli elementi.
Quando utilizzi la numerazione "ol" standard, avrai un contenuto visualizzato in cui il testo "li" è selezionabile, ma il numero che lo precede non è selezionabile.Cioè, il sistema di numerazione standard sembra essere più una "decorazione" che un contenuto reale.Se aggiungi contenuto per numeri utilizzando ad esempio i metodi ":before", questo contenuto sarà selezionabile e, a causa di ciò, si verificheranno problemi di vopy/paste indesiderati o problemi di accessibilità con gli screen reader che leggeranno inoltre questo "nuovo" contenuto al sistema di numerazione standard.
Forse un altro approccio potrebbe essere quello di modellare i numeri utilizzando le immagini, anche se questa alternativa comporterà i suoi problemi (numeri non visualizzati quando le immagini sono disabilitate, dimensione del testo per il numero che non cambia, ...).
Ad ogni modo, il motivo di questa risposta non è solo quello di proporre questa alternativa alle "immagini", ma di far riflettere le persone sulle conseguenze del tentativo di cambiare il sistema di numerazione standard per gli elenchi ordinati.
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>
