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

109

Jak mogę wyrównać do lewej numery 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 liczbie w uporządkowanej liście?

1) an item

Istnieje również rozwiązanie CSS umożliwiające zmianę z liczb na listy alfabetyczne / rzymskie zamiast używania atrybutu type w elemencie ol.

Najbardziej interesują mnie odpowiedzi, które działają w przeglądarce Firefox 3.

html css html-lists roman-numerals grom
źródło

Odpowiedzi:

98

To jest rozwiązanie, które pracuję w Firefox 3, Opera i Google Chrome. Lista nadal jest wyświetlana w IE7 (ale bez nawiasu zamykającego i numerów wyrównanych 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>
Rozwiń fragment

EDYCJA: Dołączona poprawka wielu linii przez stragera

Istnieje również rozwiązanie CSS umożliwiające zmianę z liczb na listy alfabetyczne / rzymskie zamiast używania atrybutu type w elemencie ol.

Zapoznaj się z właściwością CSS typu listy . Lub w przypadku korzystania z liczników drugi argument akceptuje wartość typu listy. Na przykład następujące będą używać wielkich liter:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */
grom
źródło
Konieczne było ponowne dodanie liczb, globalny styl usuwał je (kto wie, dlaczego miałbyś używać ol i usuwać liczby zamiast ul ??). Bardzo jasna odpowiedź +1 dla pełnego wyjaśnienia i kodu, można ją łatwo zmodyfikować, aby zrobić cokolwiek.
Morvael,
Proponuję czystsze CSS margines / dopełnienie rozwiązanie, że działa lepiej z listy posiada szerokie numeracji: ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
mmj
28

CSS dla list stylów jest tutaj , ale jest w zasadzie:

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

Jednak specyficzny układ jesteś po prawdopodobnie można osiągnąć tylko przez sięgnięcie do wnętrzności układ z czymś takim to (uwaga, że nie zostały faktycznie próbował go):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Marcus Downing
źródło
1
W ten sposób liczby są wyrównane, ale zawartość tekstowa nie.
grom
13

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

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}
<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>
Rozwiń fragment

seqAtrybut jest widoczne stosując metodę podobną do podanej w innych odpowiedzi. Ale zamiast używać content: counter(foo), używamy content: attr(seq).

Demo w CodePen z większą ilością stylizacji

z0r
źródło
7
Możesz to uprościć, jeśli użyjesz valueatrybutu on <li>. np <li value="20">. Wtedy nie potrzebujesz żadnych pseudo elementów. Demo
GWB
1
@GWB Chociaż jest to poprawne (i dobre rozwiązanie), jest ograniczone do wartości liczbowych, ponieważ lista jest porządkowa. W związku z tym nie możesz zrobić czegoś takiego value="4A", ponieważ to nie zadziała. Ponadto atrybut wartości może współpracować z typeatrybutem, ale wartość nadal musi być liczbą (ponieważ działa w uporządkowanym zestawie).
jedd.ahyoung
Dzięki - to pracował dla mnie, gdy potrzebowałem latający spodek , aby wyświetlić listę w odwrotnej kolejności ( reversedatrybut jest html5 tylko, jak przy użyciu valuez li). Zamiast używać twojego seq, ustawiłem valuei użyłem attr(value)zamiastattr(seq)
jaygooby
8

Ukradłem dużo tego z innych odpowiedzi, ale to działa dla mnie w FF3. Posiada upper-romanjednolite wcięcie, nawias zamykający.

<!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>
Steve Perks
źródło
5

Proponuję pobawić się atrybutem: before i zobaczyć, co można dzięki temu osiągnąć. Będzie to oznaczać, że Twój kod naprawdę jest ograniczony do nowych, ładnych przeglądarek i wyklucza (irytująco dużą) sekcję rynku, która wciąż używa starych przeglądarek,

Coś podobnego do następującego, które wymusza ustalenie z na przedmiotach. Tak, wiem, że samodzielne wybieranie szerokości jest mniej eleganckie, ale używanie CSS do układu jest jak tajna praca policyjna: bez względu na to, jakie masz motywy, 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.

Marcus Downing
źródło
będziesz potrzebować resetowania licznika: przedmiot; przed tym blokiem.
Greg
5

Liczby układają się lepiej, jeśli dodasz zera wiodące do liczb, ustawiając typ listy na:

ol { list-style-type: decimal-leading-zero; }
Peter Hilton
źródło
5

HTML5: użyj valueatrybutu (bez CSS)

Nowoczesne przeglądarki zinterpretują ten valueatrybut i wyświetlą go zgodnie z oczekiwaniami. Zobacz dokumentację MDN .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>
Rozwiń fragment

Zapoznaj się również z <ol>artykułem na temat MDN , zwłaszcza z dokumentacją dotyczącą startatrybutu and.

Flimm
źródło
4

Pożyczono i poprawiono odpowiedź Marcusa Downinga . Przetestowane i działa w przeglądarkach Firefox 3 i Opera 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. */
}
strager
źródło
Chcesz także wyrównywać tekst: do lewej; nie poprawnie. Ostatnia linia powinna być pozostawiona z marginesem: -3,5em;
grom
@grom, dzięki za korektę em. Ponadto Opera domyślnie renderuje listy wyrównane do prawej, więc naśladowałem to zachowanie.
strager
@grom, Problem z Firefoksem jest taki ... Firefox umieszcza li: przed pseudoelementem w osobnym wierszu bez wartości float, nawet jeśli jest to display: inline-block.
strager
@strager, Cóż, używam 3.0.4 w Linuksie i 3.0.3 w Windowsie i działa bez pływaka: left; reguła.
grom
@grom, Hmm, interesujące. Właśnie przetestowałem siebie i działa bez pływaka. Może źle wpisałem.
strager
2

Istnieje atrybut Typ, który umożliwia 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>
GateKiller
źródło
Należy naprawić znaczniki w tej odpowiedzi. Użyj małych liter i umieść wartości atrybutów w „cudzysłowach”.
dylanfm
I zamknij elementy: <li> ... </li>.
dylanfm
@dylanfm - Wiesz, że przedstawione znaczniki są poprawne, w 100% poprawny HTML, tak? Nie potępiaj ludzi, którzy nie używają XHTML, chyba że zażądano XHTML.
Ben Blank
Nie przegłosowałem cię. I tak, to prawda. HTML. Byłem po prostu wybredną w stosunku do standardów osobą.
dylanfm
Przepraszam za opublikowanie nieprawidłowego kodu HTML. Skopiowałem kod ze strony internetowej i nie pomyślałem o poprawianiu. Teraz jest mi wstyd :(
GateKiller
1

Doktorzy mówią odnośnie list-style-position: outside

CSS1 nie określa dokładnej lokalizacji pola znacznika i ze względu na kompatybilność CSS2 pozostaje równie niejednoznaczny. Aby uzyskać bardziej precyzyjną kontrolę nad polami oznaczników, użyj markerów.

Dalej na tej stronie znajduje się materiał o znacznikach.

Jednym z przykładów jest:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
Stephen Denne
źródło
Wszystkie przykłady (patrz w3.org/TR/CSS2/generate.html#q11 ) dotyczące markerów nie działają dla mnie.
grom
1

Nie ... po prostu użyj 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;
}
William Entriken
źródło
0

Mam to. Spróbuj wykonać następujące czynności:

<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 to zdecydowanie nie zadziała na starszych lub mniej zgodnych przeglądarkach: display: inline-blockto bardzo nowa właściwość.

Marcus Downing
źródło
0

Szybkie i brudne rozwiązanie alternatywne. Możesz użyć znaku tabulacji wraz ze wstępnie sformatowanym tekstem. Oto 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>

Zwróć uwagę, że odstęp między liznacznikiem a początkiem tekstu jest znakiem tabulacji (co otrzymujesz, naciskając klawisz tabulacji w notatniku).

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

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

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
Marco Luglio
źródło
0

Pozostałe odpowiedzi są lepsze z koncepcyjnego punktu widzenia. Możesz jednak po prostu uzupełnić liczby w lewo odpowiednią liczbą „& ensp;” aby ustawić je w jednej linii.

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

Metro
źródło
0

Podam tutaj odpowiedź, której zwykle nie lubię czytać, ale myślę, że skoro istnieją inne odpowiedzi, które mówią, jak osiągnąć to, czego chcesz, dobrze byłoby przemyśleć, czy to, co próbujesz osiągnąć, jest naprawdę dobry pomysł.

Najpierw zastanów się, czy dobrym pomysłem jest pokazanie pozycji w niestandardowy sposób, z innym znakiem separatora niż podany.

Nie znam powodów, ale przypuśćmy, że masz dobre powody.

Proponowane tutaj sposoby osiągnięcia polegające na dodawaniu treści do znaczników, głównie poprzez CSS: przed pseudoklasą. Ta zawartość naprawdę modyfikuje twoją strukturę DOM, dodając do niej te elementy.

Używając standardowej numeracji „ol”, uzyskasz wyrenderowaną zawartość, w której tekst „li” jest wybieralny, ale liczba poprzedzająca go nie jest wybierana. Oznacza to, że standardowy system numeracji wydaje się być bardziej „dekoracją” niż rzeczywistą treścią. Jeśli dodasz zawartość do numerów przy użyciu na przykład tych metod „: before”, zawartość ta będzie możliwa do wybrania i spowodowana tym, że spowoduje to niepożądane błędy kopiowania / wklejania lub problemy z dostępnością z czytnikami ekranu, które dodatkowo odczytują tę „nową” zawartość do standardowego systemu numeracji.

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

Tak czy inaczej, powodem tej odpowiedzi nie jest tylko zaproponowanie tej alternatywy dla „obrazków”, ale skłonienie ludzi do myślenia o konsekwencjach próby zmiany standardowego systemu numeracji dla list uporządkowanych.

tomasofen
źródło
0

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>
Vlad Alivanov
źródło