Cum puteți personaliza numerele într-o listă ordonată?

Cum pot lăsa alinierea numerelor într-o listă ordonată?

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

Modificați caracterul după numărul dintr-o listă ordonată?

1) an item

Există, de asemenea, o soluție CSS pentru a trece de la numere la liste alfabetice/romane, în loc să folosiți atributul type de pe elementul ol.

Sunt mai mult interesat de răspunsurile care funcționează în Firefox 3.

0
fr hi bn

15 răspunsuri

Există atributul Type , care vă permite să schimbați stilul de numerotare, cu toate acestea, nu puteți modifica oprire completă după numărul/litera.

  1. Turn left on Maple Street
  2. Turn right on Clover Court
0
adăugat
Scuzele mele pentru postarea html nevalid. Am copiat codul de pe un site web și nu m-am gândit să îl corectez. Mi-e rușine acum :(
adăugat autor GateKiller, sursa
@dylanfm? Sunteți conștient de faptul că marcajul prezentat este corect, HTML 100% valid, da? Nu imputerniciți persoanele care nu utilizează XHTML decât dacă se solicită XHTML.
adăugat autor Ben Blank, sursa
Nu te-am coborât. Și da, asta e adevărat. HTML. Tocmai eram o persoană serioasă.
adăugat autor dylanfm, sursa
Și închideți elementele:
  • ...
  • .
    adăugat autor dylanfm, sursa
    Marcarea în acest răspuns trebuie rezolvată. Utilizați valorile cu litere mici și atașați valorile atributelor în "ghilimele".
    adăugat autor dylanfm, sursa

    Aceasta este soluția la care lucrez în Firefox 3, Opera și Google Chrome. Lista se afișează încă în IE7 (dar fără consolele apropiate și numerele de aliniament stâng):

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    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;
    }
    1. One
    2. Two
    3. Three
    4. Four
    5. Five
    6. Six
    7. Seven
    8. Eight
    9. Nine
      Items
    10. Ten
      Items
    </div> </div>

    EDIT: Included multiple line fix by strager

    De asemenea, există o soluție CSS pentru a schimba de la numere la liste alfabetice/romane, în loc să folosiți atributul type de pe elementul ol.

    Consultați proprietatea CSS tip de tip . Sau când folosiți contoare, al doilea argument acceptă o valoare de tip listă. De exemplu, următorul lucru va folosi romanul superior:

    li::before {
      content: counter(item, upper-roman) ") ";
      counter-increment: item;
    /* ... */
    
    0
    adăugat
    demonstrație live jsfiddle.net/yzz6uaaL
    adăugat autor Adrien Be, sursa
    Vă sugerăm o soluție mai curată marjă/umplutură , care funcționează mai bine cu liste cu o numerotare largă: ol {counter-reset: item; padding-left: 0;} li {afișare: bloc; margin-bottom: .5em;} li: înainte de {display: inline-block; conținut: contor (element) ")"; contra-increment: element; padding-right: 0.8;} .
    adăugat autor mmj, sursa
    Trebuie să adăugați numerele înapoi, un stil global le-a eliminat (cine știe de ce ați folosi un ol și eliminați numerele, mai degrabă decât o ul?). Răspunsul foarte clar +1 pentru explicații complete și cod, poate fi ușor modificat pentru a face ceva.
    adăugat autor Morvael, sursa

    Faceți multe din aceste răspunsuri, dar acest lucru funcționează în FF3 pentru mine. Are codul upper-roman , indentarea uniformă, o bandă închisă.

    
    
    <head>
    <title> new document </title>
    
    </head>
    
    <body>
    
    1. One
    2. Two
    3. Three
    4. Four
    5. Five
    6. Six
    7. Seven
    8. Eight
    9. Nine
    10. Ten
    </body> </html>
    0
    adăugat

    Împrumutat și îmbunătățit Răspunsul lui Marcus Downing . Testat și funcționează în Firefox 3 și Opera 9. Suportă și mai multe linii.

    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. */
    }
    
    0
    adăugat
    @strager, Ei bine, eu sunt folosind 3.0.4 pe Linux și 3.0.3 pe Windows, și funcționează pentru mine, fără float: stânga; regulă.
    adăugat autor grom, sursa
    De asemenea, doriți text-align: left; nu dreapta. Și ultima linie trebuie să fie marginală stânga: -3.5em;
    adăugat autor grom, sursa
    Care este problema Firefox?
    adăugat autor grom, sursa
    @grom, Hmm, interesant. Tocmai m-am testat și funcționează fără flotor. Poate am greșit.
    adăugat autor strager, sursa
    @grom, problema Firefox este ... Firefox pune Li: înainte de a pseudoelement pe cont propriu, fără linie de float, chiar dacă acesta este display: inline-bloc.
    adăugat autor strager, sursa
    @grom, Vă mulțumim pentru corecția em. De asemenea, Opera redă liste la dreapta în mod implicit, așa că am imitat acest comportament.
    adăugat autor strager, sursa

    Nu, folosiți doar 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;
    }
    
    0
    adăugat

    Numerele se clasifică mai bine dacă adăugați numere de conducere la zero, setând tipul de listă de la:

    ol { list-style-type: decimal-leading-zero; }
    
    0
    adăugat

    CSS pentru listele de stil este aici , dar este în esență:

    li {
        list-style-type: decimal;
        list-style-position: inside;
    }
    

    Cu toate acestea, aspectul specific pe care îl urmăriți poate fi realizat, probabil, numai prin înclinarea în interiorul aspectului cu ceva de genul (notați că nu am încercat-o):

    ol { counter-reset: item }
    li { display: block }
    li:before { content: counter(item) ") "; counter-increment: item }
    
    0
    adăugat
    Aceasta face numerele aliniate, dar conținutul textului nu este.
    adăugat autor grom, sursa

    Vă sugerez să jucați cu: înainte de atributul și să vedeți ce puteți obține cu el. Aceasta va însemna că codul dvs. este într-adevăr limitat la browsere noi și exclude secțiunea (enervant de mare) a pieței, care încă utilizează browsere vechi,

    Ceva de genul următor, care forțează un fix pe elementele. Da, știu că este mai puțin elegant să trebuiască să alegi lățimea, dar folosirea CSS pentru aspectul tău este ca munca polițienească sub acoperire: oricât de bună este motivul tău, întotdeauna devine dezordonat.

    li:before {
      content: counter(item) ") ";
      counter-increment: item;
      display: marker;
      width: 2em;
    }
    

    Dar va trebui să experimentați pentru a găsi soluția exactă.

    0
    adăugat
    veți avea nevoie de un element de contra-reset: element; înainte de acel bloc.
    adăugat autor Greg, sursa

    O am. Încercați următoarele:

    <html>
    <head>
    
    </head>
    <body>
    
    1. Something
    2. Something
    3. Something
    4. Something
    5. Something
    6. Something
    7. Something
    8. Something
    9. Something
    10. Something
    11. Something
    12. Something
    </body>

    Cunoașterea este că cu siguranță nu va funcționa pe browsere mai vechi sau mai puțin compatibile: display: inline-block este o proprietate foarte nouă.

    0
    adăugat

    Cred că acesta este un răspuns care satisface cerințele dvs.:

    <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    li { 
      list-style-position: inside;
      margin-bottom: .5em;
    }
    li span {
      float: left;
      margin-left: 2em;
      margin-top: -1.25em;
    }
    1. Item
    2. Item
    3. Item
    4. Item
    </div> </div>

    0
    adăugat
    Da, acest lucru funcționează. Dacă nu ar fi trebuit să adaugi o deschidere. Dar acesta este cel mai bun răspuns până acum.
    adăugat autor grom, sursa
    De asemenea, ați putea folosi atributul value pe LI-uri. Dacă setați valoarea unui element la un număr, următorii vor continua de acolo.
    adăugat autor Arve Systad, sursa
    Da, marcajul suplimentar este șchiop.
    adăugat autor willoller, sursa
    UPDATE: Nici nu este depreciat în HTML5, așa că faceți ce vă place :)
    adăugat autor willoller, sursa
    @Arve Da, asta e bine - ambele opțiuni sunt depreciate în xhtml și nu există încă o soluție bună pentru css-browser-ul. Citiți mai departe: webmasterworld.com/css/3119510.htm și w3.org/TR/CSS2/generate.html#counters
    adăugat autor willoller, sursa

    The docs say regarding list-style-position: outside

    CSS1 nu a specificat locația exactă a casetei de marcare și, din motive de compatibilitate, CSS2 rămâne la fel de ambiguă. Pentru un control mai precis al cutiilor de marcare, folosiți markeri.

    Mai departe, pagina este chestia despre marcatori.

    Un exemplu este:

           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
    
    0
    adăugat
    Toate exemplele (consultați w3.org/TR/CSS2/generate.html#q11 ) pentru markeri nu funcționează pentru mine.
    adăugat autor grom, sursa

    Quick and dirt alternative solution. You can use a tabulation character along with preformatted text. Here's a possibility:

    
    

    și html-ul tău:

    1. an item
    2. another item
    3. ...

    Rețineți că spațiul dintre eticheta li și începutul textului este un caracter de tabulare (ceea ce obțineți atunci când apăsați tasta tab din interiorul blocajului).

    Dacă aveți nevoie de suport pentru browsere mai vechi, puteți face acest lucru în schimb:

    
    
    
    1.    
      an item
    2.    
      another item
    3. ...
    0
    adăugat

    The other answers are better from a conceptual point of view. However, you can just left-pad the numbers with the appropriate number of ' ' to make them line up.

    * Note: I did not at first recognize that a numbered list was being used. I thought the list was being explicitly generated.

    0
    adăugat

    Voi da aici tipul de răspuns pe care, de obicei, nu-mi place să-l citesc, dar cred că, deoarece există și alte răspunsuri care vă spun cum să obțineți ceea ce doriți, ar fi bine să vă regândiți dacă ceea ce încercați să obțineți este într-adevăr o idee buna.

    În primul rând, ar trebui să vă gândiți dacă este o idee bună să afișați elementele într-un mod nestandard, cu un separator charater diferit de cel furnizat.

    Nu știu motivele pentru asta, dar să presupunem că aveți motive întemeiate.

    Modurile propuse aici pentru realizare constau în adăugarea de conținut la marcarea dvs., în principal prin CSS: înainte de pseudoclass. Acest conținut modifică într-adevăr structura dvs. DOM, adăugând acele elemente la acesta.

    Când utilizați numerotarea standard "ol", veți avea un conținut redat în care textul "li" este selectabil, dar numărul care precede nu este selectabil. Asta înseamnă că sistemul de numerotare standard pare a fi mai "decorativ" decât conținut real. Dacă adăugați conținut pentru numere folosind, de exemplu, acele metode ": înainte", acest conținut va fi selectabil și poate fi utilizat pentru a efectua probleme nedorite de copiere/lipire sau probleme de accesibilitate cu cititoare de ecran care vor citi în plus acest conținut "nou" la sistemul de numerotare standard.

    Poate că o altă abordare ar putea fi aceea de a modela numerele folosind imagini, deși această alternativă va aduce propriile probleme (numerele nu sunt afișate atunci când imaginile sunt dezactivate, dimensiunea textului pentru a nu se schimba numărul, ...).

    Oricum, motivul pentru acest răspuns nu este doar de a propune această alternativă "imagini", ci de a face pe oameni să gândească în consecințele încercării de a schimba sistemul de numerotare standard pentru listele ordonate.

    0
    adăugat

    De asemenea, puteți specifica propriile numere în HTML - de ex. dacă numerele sunt furnizate de o bază de date:

    1. Item one
    2. Item twenty
    3. Item three hundred

    Atributul seq este facut vizibil folosind o metoda similara celei din alte raspunsuri. Dar în loc să folosim content: counter (foo) , folosim content: attr (seq) :

    ol {
      list-style: none;
    }
    
    ol > li:before {
      content: attr(seq) ". ";
    }
    

    Demonstrație în CodePen cu mai mult stil

    0
    adăugat
    @GWB În timp ce aceasta este validă (și o soluție bună), ea este limitată la valori numerice deoarece lista este ordinală. Ca atare, nu puteți face ceva de genul value = "4A" , deoarece nu va funcționa. În plus, atributul value poate funcționa cu atributul type , dar valoarea trebuie să fie un număr (deoarece funcționează într-un set ordonat).
    adăugat autor jedd.ahyoung, sursa
    Multumesc - acest lucru mi-a ajutat atunci când am avut nevoie de Flying Saucer pentru a afișa o listă în ordine inversă ( inversat este doar html5, așa cum se utilizează value al li ). În locul codului seq am setat o valoare și am folosit attr (value) în loc de attr (seq)
    adăugat autor jaygooby, sursa
    Puteți simplifica acest lucru dacă utilizați atributul value în
  • . de exemplu.
  • . Apoi nu aveți nevoie de pseudo elemente. Demo
  • adăugat autor GWB, sursa