Jak można dostosować liczby na uporządkowanej liście?

Jak mogę wyrównać do lewej liczby na uporządkowanej liście?

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

Zmienić znak po numerze na liście uporządkowanej?

1) an item

Istnieje również rozwiązanie CSS do zmiany z liczb na listy Alfabetyczne / rzymskie zamiast używania atrybutu type na elemencie ol.

Jestem głównie zainteresowany odpowiedziami, które działają na Firefoksie 3.

Author: kapa, 2008-08-14
Source

15 answers

To jest rozwiązanie, które mam działa w Firefox 3, Opera i Google Chrome. Lista nadal wyświetla się w IE7 (ale bez nawiasów ścisłych i numerów wyrównania do lewej): 

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: włączone poprawki wielu linii przez stragera

Istnieje również rozwiązanie CSS do zmiany z liczb na listy Alfabetyczne / rzymskie zamiast używania atrybutu type na elemencie ol.

Zobacz właściwość CSS list-style-type . Lub kiedy używając liczników drugi argument przyjmuje wartość typu list-style. Na przykład:]} 

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
 86
Author: grom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-30 09:57:57

CSS dla list stylizacji jest TUTAJ , ale jest w zasadzie: 

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

Jednak konkretny układ, którego szukasz, można prawdopodobnie osiągnąć tylko poprzez zagłębianie się w wnętrza układu za pomocą czegoś w rodzaju this (zauważ, że nie próbowałem tego): 

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
 26
Author: Marcus Downing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-14 19:18:09

Ukradłem wiele tego z innych odpowiedzi, ale to działa w FF3 dla mnie. Posiada upper-roman, jednolite wcięcie, zwarty wspornik.

<!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>
 8
Author: Steve Perks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-10 00:22:30

Możesz również określić własne liczby w HTML - np. jeśli liczby są dostarczane przez bazę danych: 

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

Atrybut seq jest widoczny przy użyciu metody podobnej do tej podanej w innych odpowiedziach. Ale zamiast używać content: counter(foo), używamy content: attr(seq): 

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

Demo w CodePen z większą stylizacją

 7
Author: z0r,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-05 04:53:54

Proponuję pobawić się atrybutem: before i zobaczyć, co można z nim osiągnąć. Oznacza to, że Twój kod jest naprawdę ograniczony do nowych, ładnych przeglądarek i wyklucza (denerwująco dużą) sekcję rynku, która nadal używa starych, śmieciowych przeglądarek,

Coś takiego jak poniżej, co wymusza stałe z na elementach. Tak, Wiem, że to mniej eleganckie, aby samemu wybrać szerokość, ale używanie CSS do układu jest jak tajna praca policyjna: niezależnie od dobrych motywów, zawsze robi się bałagan.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}
Ale będziesz musiał eksperymentować, aby znaleźć dokładne rozwiązanie.
 5
Author: Marcus Downing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-18 14:51:27

Liczby wyrównują się lepiej, jeśli do liczb dodamy wiodące-zera, ustawiając list-style-type na: 

ol { list-style-type: decimal-leading-zero; }
 5
Author: Peter Hilton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-24 10:30:06

Pożyczone i ulepszone odpowiedź Marcusa Downinga . Testowany i działa w Firefoksie 3 i operze 9. Obsługuje również wiele 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. */
}
 4
Author: strager,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:09

Istnieje atrybut Type , który pozwala na zmianę stylu numeracji, jednak nie można zmienić kropki po cyfrze/literze.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
 2
Author: GateKiller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-28 10:53:54

Dokumenty mówią o list-style-position: outside

CSS1 nie sprecyzował dokładnego położenia pola znacznika i ze względu na kompatybilność, CSS2 pozostaje równie niejednoznaczne. W celu dokładniejszego sterowania markerami należy używać markerów.

Dalej na tej stronie są rzeczy o markerach.

Jeden przykład to: 

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
 1
Author: Stephen Denne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-28 06:53:43

Nie... wystarczy użyć 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;
}
 1
Author: William Entriken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-22 23:45:10

Mam. Wypróbuj następujące: 

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

Haczyk polega na tym, że tazdecydowanie nie będzie działać na starszych lub mniej zgodnych przeglądarkach: display: inline-block jest bardzo nową właściwością.

 0
Author: Marcus Downing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-01-28 14:49:18

Szybkie i brudne alternatywne rozwiązanie. Możesz użyć znaku tabulacji wraz z wstępnie sformatowanym tekstem. Jest taka możliwość: 

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

I twój html: 

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

Zauważ, że spacja pomiędzy znacznikiem li a początkiem tekstu jest znakiem tabulacji(co otrzymujesz po naciśnięciu klawisza tab w notatniku).

Jeśli potrzebujesz obsługi starszych przeglądarek, możesz to zrobić zamiast tego: 

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
 0
Author: Marco Luglio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-01 17:56:42

Inne odpowiedzi są lepsze z konceptualnego punktu widzenia. Jednak, można po prostu lewy-pad numery z odpowiednią liczbę'', aby je wyrównać.

* Uwaga: na początku nie rozpoznałem, że używana jest lista numerowana. Myślałem, że lista jest wyraźnie generowana.

 0
Author: Metro,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-28 02:44:12

Dam tutaj odpowiedź, której zwykle nie lubię czytać, ale myślę, że ponieważ istnieją inne odpowiedzi mówiące, jak osiągnąć to, co chcesz, byłoby miło przemyśleć, czy to, co próbujesz osiągnąć, jest naprawdę dobrym pomysłem.

Po Pierwsze, należy pomyśleć, czy jest to dobry pomysł, aby pokazać elementy w niestandardowy sposób, z separatorem różniącym się od podanego.

Nie znam tego powodu, ale załóżmy, że masz dobre powody.

The sposoby na dodanie treści do znaczników, głównie poprzez CSS: before pseudoclass. Ta zawartość naprawdę modyfikuje strukturę DOM, dodając te elementy do niej.

Gdy używasz standardowej numeracji "ol", będziesz miał renderowaną zawartość, w której można wybrać tekst "li", ale poprzedzająca go Liczba nie jest wybierana. Oznacza to, że standardowy system numeracji wydaje się być bardziej "dekoracją" niż rzeczywistą treścią. Jeśli dodasz treść do liczb używając do przykładowe metody": before", ta zawartość będzie zaznaczana i przypisywana do tego, wykonując niepożądane problemy z vopy / paste lub problemy z dostępnością z czytnikami ekranu, które będą czytać tę "nową" zawartość oprócz standardowego systemu numeracji.

Być może innym podejściem byłoby stylizowanie liczb za pomocą obrazów, chociaż ta alternatywa przyniesie własne problemy (liczby nie pokazywane, gdy obrazy są wyłączone, rozmiar tekstu dla liczby nie zmienia się,...).

W każdym razie powód dla tej odpowiedzi jest nie tylko zaproponowanie tej alternatywy" obrazów", ale aby ludzie myśleli o konsekwencjach próby zmiany standardowego systemu numeracji dla uporządkowanych list.

 0
Author: tomasofen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-08 17:10:48

Ten kod sprawia, że styl numeracji jest taki sam jak nagłówki zawartości 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>
 0
Author: Vlad Alivanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-27 14:52:35