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

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 }

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.

    
Turn left on Maple Street
    
Turn right on Clover Court

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ă.

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; }

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

li { 
  list-style-position: inside;
  margin-bottom: .5em;
}
li span {
  float: left;
  margin-left: 2em;
  margin-top: -1.25em;
}

  
Item
  
Item
  
Item
  
Item

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):

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;
}

  
One
  
Two
  
Three
  
Four
  
Five
  
Six
  
Seven
  
Eight
  
Nine
Items
  
Ten
Items

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;
/* ... */

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;
       }

O am. Încercați următoarele:

    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something
    
Something

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ă.

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ă.

  
One
  
Two
  
Three
  
Four
  
Five
  
Six
  
Seven
  
Eight
  
Nine
  
Ten

Î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. */
}

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

și html-ul tău:

    an item
    another item
...

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:

    
   
an item
    
   
another item
    ...

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;
}

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.

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.

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

  
Item one
  
Item twenty
  
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