Come mantenere il rientro per la seconda riga negli elenchi ordinati tramite CSS?

260

Voglio avere un elenco "interno" con elenchi puntati o numeri decimali a filo con blocchi di testo superiori. Le seconde righe delle voci dell'elenco devono avere lo stesso rientro della prima riga!

Per esempio:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

Il CSS fornisce solo due valori per la sua "posizione in stile elenco": dentro e fuori. Con "dentro" le seconde linee sono allineate con i punti dell'elenco e non con la linea superiore:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

Larghezza "fuori" la mia lista non è più a filo con blocchi di testo superiori.

Gli esperimenti con larghezza del testo indent, padding-left e margin-left funzionano per liste non ordinate ma falliscono per liste ordinate perché dipendono dal numero di caratteri del decimale della lista:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." e "12." non sono allineati con il blocco di testo superiore rispetto a "3." e "4.".

Allora, dov'è il segreto sugli elenchi ordinati e sul rientro di seconda linea? Grazie per i tuoi sforzi!

html  css  html-lists 
— kernfrucht
fonte
1
L'utente Pali Madra ha aggiunto questo come una risposta, ma è stato eliminato per non contenere ulteriori spiegazioni. Ha detto che il jsfiddle potrebbe essere quello che stai cercando: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
Prova a impostare padding-left only ...
— matzone
3
Nel caso in cui qualcuno si imbattesse in questa domanda, che è solo alla ricerca di "indentazione di base dell'elenco", dai un'occhiata a questa domanda ( stackoverflow.com/questions/17556496/… ) e Natasha Banegas risponde.
— SunnyRed,
Non una sola risposta risponde alla domanda reale. La vera domanda è come allineare a sinistra le cifre nell'elenco, mentre separatamente allineare a sinistra il testo dell'elemento dell'elenco con il testo dell'elemento sopra di esso quando quel testo trabocca su una seconda riga o successiva. Per impostazione predefinita - e in quasi tutte le risposte - le cifre dell'elenco sono allineate a destra e il testo delle voci dell'elenco è allineato a sinistra.
— Jessie Westlake,

Risposte:

267

Aggiornare

Questa risposta è obsoleta. Puoi farlo molto più semplicemente, come sottolineato in un'altra risposta di seguito:

ul {
  list-style-position: outside;
}

Vedi https://www.w3schools.com/cssref/pr_list-style-position.asp

Risposta originale

Sono sorpreso di vedere che questo non è stato ancora risolto. È possibile utilizzare l'algoritmo di layout della tabella del browser (senza utilizzare le tabelle) in questo modo:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

inserisci qui la descrizione dell'immagine

Per farlo funzionare in IE8, usa la :beforenotazione legacy con due punti.

— user123444555621
fonte
2
@Perelli fooè solo una stringa arbitraria (id), viene utilizzato per collegare le counter-reset, counter-incremente counter()proprietà.
— user123444555621
3
Puoi anche evitare le cose da tavolo traballanti usando position: relativesul <li>e position: absolutesul contenuto generato. Vedi jsfiddle.net/maryisdead/kgr4k per un esempio.
— maryisdead,
2
@maryisdead Why 40px? Ciò si interromperà quando i segnalini saranno più ampi di così . Il punto centrale dell'utilizzo del layout della tabella è che il browser si adatta automaticamente al contenuto.
— user123444555621
5
Bello, ma come controlli il <li> margine inferiore? L'altezza di <li> è determinata esclusivamente dall'altezza degli elementi della cella della tabella in essa contenuti. Pertanto, margine, imbottitura e altezza su quegli elementi non hanno alcun effetto. Come aggirare questa limitazione?
— hschmieder,
3
Se si dispone di voci di elenco a più righe e si necessita di una spaziatura verticale coerente, la soluzione consiste nell'aggiungere una spaziatura dei bordi verticale al selettore ol, ad esempio spaziatura dei bordi: 0 3px; Il normale riempimento sulla cella della tabella non funziona perché il numero è sempre solo una riga.
— RemBem,
207

Credo che questo farà quello che stai cercando.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

inserisci qui la descrizione dell'immagine

— JTOrlando
fonte
21
meglio se aggiungi anche padding-left: 1em;
— Bence Gacsályi,
16
Questa è di gran lunga la migliore risposta di tutte le soluzioni in questa pagina. È molto più conveniente di altri. Se stai esitando con quale risposta scegliere, scegli questa.
— Valentin Mercier,
25
@loremmonkey Questo è veloce e sporco ma non è una vera soluzione. Primo, 1emnon eguaglia lo spazio del rientro. Le linee non si allineano perfettamente in termini di pixel. Secondo, che dire di quando l'elenco raggiunge il numero 10? 100? Il rientro del testo non funzionerà, non sarà allineato. Questa risposta dovrebbe essere sottovalutata.
— Sunny
1
@Sunny È un elenco di dischi non numerato, quindi perché contare fino a 100? Non vedo alcun problema con le mie liste usando il codice sopra.
— Lorem Monkey,
2
@loremmonkey Il trattino non lo è 1em. oi60.tinypic.com/a0eyvs.jpg Il primo elemento dell'elenco utilizza la tecnica di rientro del testo sopra. Rispetto a come appare normalmente con la posizione in stile elenco: all'esterno è disallineato, disattivato da un pixel in questo caso.
— Sunny
39

Il modo più semplice e pulito, senza alcun trucco, è solo di indentare il ul(o ol), in questo modo:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Questo dà lo stesso risultato della risposta accettata: https://jsfiddle.net/5wxf2ayu/

Immagine dello schermo:

inserisci qui la descrizione dell'immagine

— Chuck Le Butt
fonte
1
Potrebbe essere necessario fare domanda list-style-position: outsideper <li>.
— Alex,
@Alex Dovresti farlo solo se stai forzando la sovrascrittura di uno stile esistente ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).
— Chuck Le Butt,
25

Controlla questo violino:

http://jsfiddle.net/K6bLp/

Mostra come indentare manualmente ul e ol usando i CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Ho anche modificato il tuo violino

http://jsfiddle.net/j7MEd/3/

Prendine nota.

— Deepan Babu
fonte
grazie, funziona benissimo per UL e per OL fino a 9 voci dell'elenco. Questo è il problema principale che ho descritto nella mia domanda in larghezza la cosa 11/12. Nel mio esempio sopra ho eseguito un'altra tecnica in modo che il problema appaia diverso ma il nocciolo del problema rimane lo stesso: c'è una differenza se il mio punto di elenco decimale ha uno o due o più numeri - ad esempio 1., 11. o 111.! Non vedo il punto in cui sono in grado di reagire tramite CSS e adattare il rientro del testo e il margine sinistro al numero di cifre.
— kernfrucht,
Per il secondo trattino di ol (più di una cifra), penso che CSS non lo risolverà. Dovremmo andare solo per jquery.
— Deepan Babu,
Si noti inoltre che l' typeattributo per <ol>sembra essere deprecato in HTML 5. Utilizzare style="list-style-type: "invece.
— AJ.
2
21 di voi sono anche seri? questo non funziona. Non sono sicuro se hai modificato il codice da quando hai pubblicato.
— JGallardo
9

È possibile impostare il margine e il riempimento di un olo ulin CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
fonte
sfortunatamente il problema non è risolto da questa soluzione: le seconde righe sono allineate con i punti della lista e non la larghezza della riga superiore, vedi esempio sopra
— kernfrucht
11 e 12 in jsfiddle.net/j7MEd/1 si allineano con i paragrafi in alto e in basso e non ho cambiato il codice. Mi sto perdendo qualcosa?
— luke2012,
no, non è questo il punto. Il problema principale è che la seconda (e terza, ecc ...) riga di ciascun punto elenco non ha lo stesso "rientro" della prima riga! (vedi esempio jsfiddle). Nella mia domanda precedente penso a una soluzione alternativa con imbottitura, margine ecc., Ma funziona solo per elenchi non ordinati. Sulla lista ordinata si verificano nuovi problemi come questo 11/12. Quindi la mia domanda principale è: come posso fare il rientro (come presento nel mio primo esempio della mia versione) fatto per gli elenchi ordinati senza avere problemi come l'11 / 11.
— kernfrucht,
Ok scusa capito! Questo è un modo ... l'unico problema è che per raggiungere il browser incrociato dovrai impostare il margine in IE e il riempimento in Firefox. jsfiddle.net/j7MEd/2
— luke2012
7

Credo che tu debba solo mettere la lista 'bullet' fuori dall'imbottitura.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— KnownColor
fonte
6

Puoi usare CSS per selezionare un intervallo; in questo caso, si desidera che gli elementi dell'elenco 1-9:

ol li:nth-child(n+1):nth-child(-n+9)

Quindi regola i margini su quei primi elementi in modo appropriato:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Guardalo in azione qui: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— LaFaucon
fonte
5

Il seguente CSS ha funzionato:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— itoctopus
fonte
4

La mia soluzione è proprio la stessa Pumbaa80 uno s', ma vi suggerisco di usare display: table, invece di display:table-rowper lielemento. Quindi sarà qualcosa del genere:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Così ora possiamo usare i margini per la spaziatura tra li's

— alex
fonte
1

Sono abbastanza affezionato a questa soluzione da solo:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
— Corey Ballou
fonte
unica dimensione del carattere del problema
— atilkan
0

Le liste ol, ul funzioneranno se vuoi, puoi anche usare una tabella con bordo: nessuna nel CSS.

— Casualbot
fonte
penso che questa non sia una buona soluzione per quanto riguarda le regole semantiche
— kernfrucht
0

Il CSS fornisce solo due valori per la sua "posizione in stile elenco": dentro e fuori. Con "dentro" le seconde linee sono allineate con i punti dell'elenco e non con la linea superiore:

Negli elenchi ordinati, senza intervento, se si assegna a "list-style-position" il valore "inside", la seconda riga di un lungo elemento dell'elenco non avrà alcun rientro, ma tornerà al bordo sinistro dell'elenco (ovvero si allineerà a sinistra con il numero dell'articolo). Questo è peculiare degli elenchi ordinati e non si verifica negli elenchi non ordinati.

Se invece dai a "list-style-position" il valore "outside", la seconda riga avrà lo stesso rientro della prima riga.

Ho avuto un elenco con un bordo e ho avuto questo problema. Con "list-style-position" impostato su "inside", la mia lista non sembrava che volessi. Ma con "list-style-position" impostato su "outside", i numeri delle voci dell'elenco cadono fuori dagli schemi.

Ho risolto questo semplicemente impostando un margine sinistro più ampio per l'intera lista, che ha spinto l'intera lista verso destra, nella posizione in cui si trovava prima.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margine: 0,5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— Chris
fonte
-1

Ok, sono tornato indietro e ho capito alcune cose. Questa è una soluzione grossolana a ciò che stavo proponendo, ma sembra essere funzionale.

Innanzitutto, ho creato i numeri in una serie di elenchi non ordinati. Un elenco non ordinato avrà normalmente un disco all'inizio di ogni elemento dell'elenco (

  • ), quindi devi impostare il CSS in stile elenco: none;

    Quindi, ho visualizzato l'intero elenco: table-row. Ecco, perché non ti basta incollare il codice invece di parlarne?

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS:

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    Questo sembra allineare il testo nel 2 ° div con i numeri nell'elenco ordinato nel primo div. Ho circondato sia l'elenco che il testo con un tag in modo da poter dire a tutti i div di essere visualizzati come blocchi in linea. Questo li ha allineati bene.

    Il margine è lì per mettere uno spazio tra il periodo e l'inizio del testo. Altrimenti, si scontrano uno contro l'altro e sembra un pugno nell'occhio.

    Il mio datore di lavoro voleva che il testo racchiuso (per voci bibliografiche più lunghe) si allineasse con l'inizio della prima riga, non con il margine sinistro. Inizialmente mi stavo agitando con un margine positivo e un rientro del testo negativo, ma poi mi sono reso conto che quando sono passato a due div diversi, questo ha avuto l'effetto di farlo in modo che il testo fosse allineato perché il margine sinistro del div era il margine da cui il testo iniziava naturalmente. Quindi, tutto ciò di cui avevo bisogno era un margine di 0,2 em per aggiungere un po 'di spazio, e tutto il resto era allineato a nuoto.

    Spero che questo aiuti se OP ha avuto un problema simile ... Ho avuto difficoltà a capirlo.

    • — David
    fonte
    -1

    Ho avuto lo stesso problema e ho iniziato a utilizzare la risposta di user123444555621 . Tuttavia, avevo anche bisogno di aggiungere paddinge uno bordera ciascuno li, che quella soluzione non consente perché ognuno liè un table-row.

    Innanzitutto, usiamo a counterper replicare oli numeri.

    Abbiamo quindi impostato display: table;su ciascuno lie display: table-cellsul :beforeper darci il rientro.

    Finalmente la parte difficile. Poiché non stiamo utilizzando un layout di tabella per l'intero, oldobbiamo assicurarci che ciascuno :beforeabbia la stessa larghezza. Possiamo usare l' chunità per mantenere approssimativamente la larghezza uguale al numero di caratteri. Al fine di mantenere uniformi le larghezze quando il numero di cifre per le :beforediverse differisce, possiamo implementare query di quantità . Supponendo che i tuoi elenchi non siano 100 o più articoli, devi solo una regola di query quantità per dire :beforedi cambiarne la larghezza, ma puoi facilmente aggiungerne altri.

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    Espandi frammento

    — Jacob Alvarez
    fonte
    Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
    Licensed under cc by-sa 3.0 with attribution required.