Czy lista uporządkowana może dać wynik podobny do 1.1, 1.2, 1.3 (zamiast tylko 1, 2, 3,…) z css?

201

Czy uporządkowana lista może generować wyniki wyglądające jak 1.1, 1.2, 1.3 (zamiast tylko 1, 2, 3, ...) z CSS? Do tej pory używanie list-style-type:decimalzaowocowało tylko 1, 2, 3, a nie 1.1, 1.2., 1.3.

html css Richard77
źródło
Proponuję porównać przyjętą odpowiedź z odpowiedzią Jakuba Jirutki. Myślę, że ten drugi jest nawet znacznie lepszy.
Frank Conijn,
Eleganckie rozwiązanie. Masz pojęcie, dlaczego Wikipedia używa ul do swoich sekcji treści zamiast tego?
Mattypants
1
@davnicwil Zgadzam się; wygląda na to, że prawdopodobnie właśnie we wrześniu zastosowałem duplikat w niewłaściwej kolejności.
TylerH,
Fajnie, teraz czuję się niezręcznie, ponieważ nigdy nie przyszło mi do głowy, że może to być zwykły błąd - przepraszam!
davnicwil

Odpowiedzi:

289

Możesz użyć do tego liczników :

Poniższe numery arkuszy stylów zagnieżdżają elementy listy jako „1”, „1.1”, „1.1.1” itp.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Przykład 

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
Rozwiń fragment kodu

Aby uzyskać więcej informacji, zobacz Zagnieżdżone liczniki i zakres .

Gumbo
źródło
2
świetna odpowiedź. Jakie jest poparcie tego?
Jason McCreary,
1
@Jason McCreary: Cóż, to wada: liczniki nie są obsługiwane w IE do wersji 8 .
Gumbo,
3
W tym rozwiązaniu brakuje jednej drobnej rzeczy: kropki po numerze elementu. Nie wygląda jak standardowy styl listy. Napraw, dodając kropkę do reguły dla li:before: content: counters(item, ".")". ";
LS
4
To kiepska odpowiedź. To nie działa poprawnie. Sprawdź odpowiedź Jakuba Jirutki poniżej
Pan Pablo
1
@Gumbo Wiem, a odpowiedź Jakuba dała mi prawidłową numerację.
Pan Pablo
236

Żadne z rozwiązań na tej stronie nie działa poprawnie i uniwersalnie dla wszystkich poziomów i długich (zawijanych) akapitów. Naprawdę trudne jest uzyskanie spójnego wcięcia z powodu zmiennej wielkości znacznika (1., 1.2, 1.10, 1.10.5,…); nie można go po prostu „sfałszować”, nawet przy wstępnie obliczonym marginesie / wypełnieniu dla każdego możliwego poziomu wcięcia.

W końcu wymyśliłem rozwiązanie, które faktycznie działa i nie wymaga JavaScript.

Jest testowany na Firefox 32, Chromium 37, IE 9 i Android Browser. Nie działa na IE 7 i wcześniejszych.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Przykład: Przykład

Wypróbuj na JSFiddle , rozwidl na Gist .

Jakub Jirutka
źródło
1
Dobra robota dla osiągnięcia tego rodzaju wcięcia. Nadal jednak twierdzę, że dwa pierwsze przypadki wcięć, które wymieniłeś, są kwestią preferencji, a nie dobra i zła. Weźmy pod uwagę przypadek 1 i przypadek 2 - ten drugi potrafi przecisnąć się na znacznie więcej poziomach, zanim odstępy stają się niewygodne, a jednocześnie wyglądają całkiem nieźle. Ponadto zarówno MS Word, jak i domyślny styl przeglądarki używają wcięcia 2 przypadku. Myślę, że oni też robią to źle?
Saul Fautley
2
@ saul-fautley To źle pod względem typografii. Twój przykład z szaloną liczbą zagnieżdżonych poziomów pokazuje, że zagnieżdżona numeracja nie jest odpowiednia dla zbyt wielu poziomów, ale jest to dość oczywiste. MS Words nie jest systemem składu, to zwykły procesor dokumentów o słabej typografii. Domyślny styl przeglądarki… och, nie wiesz dużo o typografii, prawda?
Jakub Jirutka
3
To naprawdę działa (technicznie) na wszystkich poziomach i długich akapitach. Jeśli rozsądne jest użycie kilkunastu poziomów, to kolejne pytanie, które nie ma nic wspólnego z rozwiązaniem technicznym. Chodzi o to, że nie musisz predefiniować reguły CSS dla każdego poziomu zagnieżdżenia, jak w przypadku niektórych innych rozwiązań.
Jakub Jirutka
4
Chociaż nie powiedziałbym, że z innymi odpowiedziami jest coś „niewłaściwego”, powiedziałbym, że są one niekompletne. Ta odpowiedź jest na miejscu, a nawet działała w przerażająco dziwnie stylizowanej witrynie, którą zmieniam.
DanielM
2
@tremby: Rozbieżność można rozwiązać poprzez użycie li „display: table-row” zamiast „display: table”. Problemem jest to, że li nie może wtedy używać żadnych marginesów / wypełnień, ponieważ rzędy tabel są zawsze automatycznie sortowane według zawartości. Można to obejść, dodając „li: after” z „display: block”. Zobacz pełny przykład w jsFiddle . Jako dodatkowy bonus dodałem „wyrównanie tekstu: do prawej” do „li: przed”, aby wyrównać liczby do prawej.
mmlr
64

Wybrana odpowiedź jest świetnym początkiem, ale zasadniczo wymusza list-style-position: inside;stylizację elementów listy, co sprawia, że ​​zawijany tekst jest trudny do odczytania. Oto proste obejście, które daje również kontrolę nad marginesem między liczbą a tekstem i wyrównuje liczbę do prawej zgodnie z domyślnym zachowaniem.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

Saul Fautley
źródło
Jednym minusem jest to, że dodaje kropkę na końcu każdego elementu listy.
Davin Studer,
3
@Davin Studer: Dodaje tylko kropkę na końcu każdej liczby, zgodnie z olzachowaniem domyślnym . Można go łatwo usunąć, usuwając ostatni "."z contentwłaściwości, ale dla mnie wygląda to nieco dziwnie.
Saul Fautley,
14

Rozwiązania zamieszczone tutaj nie działały dla mnie dobrze, więc zrobiłem mieszankę odpowiedzi na to pytanie i następujące pytanie: Czy można utworzyć wielopoziomową uporządkowaną listę w języku HTML?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Wynik:

zrzut ekranu

Uwaga: zrzut ekranu, jeśli chcesz zobaczyć kod źródłowy lub cokolwiek z tego postu: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

chelder
źródło
1
To najlepsza (i najprostsza) działająca odpowiedź z całej strony.
Bruno Toffolo,
6

Uwaga: Użyj CSS, aby utworzyć zagnieżdżoną numerację w nowoczesnej przeglądarce. Zobacz zaakceptowaną odpowiedź. Poniższe informacje dotyczą wyłącznie historii.counters

Jeśli przeglądarka obsługuje contenti counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}
<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>
Rozwiń fragment kodu

kennytm
źródło
To rozwiązanie kończy się niepowodzeniem, gdy listy są zagnieżdżone.
LS
@LS Zawsze możesz dostosować selektory do swoich potrzeb. .foo > ol > li.
kennytm
1
Chodzi mi o to, że zapisałeś na stałe „1”. w stylu. Co się stanie, gdy podlista jest dzieckiem drugiego elementu na liście nadrzędnej? Chcesz, aby pojawiał się jako „2.”, ale zawsze będzie „1.” ze względu na sposób, w jaki jest tutaj kodowany. Jakie jest rozwiązanie Czy tworzyć nowe zestawy stylów dla każdej możliwej liczby? Nie. Użyj counters()funkcji jak w powyższych przykładach zamiast counter()funkcji.
LS
2 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

Wynik: http://i.stack.imgur.com/78bN8.jpg

KingRider
źródło
2

Mam pewien problem, gdy istnieją dwie listy, a druga znajduje się w DIV. Druga lista powinna zaczynać się od 1., a nie 2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

EDYCJA: Rozwiązałem problem przez http://jsfiddle.net/hy5f6161/

robertad
źródło
1

W niedalekiej przyszłości możesz być w stanie użyć elementu ::markerpsuedo, aby osiągnąć ten sam rezultat, co inne rozwiązania w jednym wierszu kodu.

Pamiętaj, aby sprawdzić tabelę zgodności przeglądarki, ponieważ wciąż jest to technologia eksperymentalna. W chwili pisania tego tylko Firefox i Firefox dla Androida, począwszy od wersji 68, obsługują to.

Oto fragment kodu, który zostanie poprawnie wyrenderowany, jeśli zostanie wypróbowany w zgodnej przeglądarce: 

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }
<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>
Rozwiń fragment kodu

Możesz także sprawdzić ten świetny artykuł, smashingmagazine na ten temat.

tyrion
źródło
0

Musiałem dodać to do rozwiązania opublikowanego w 12, ponieważ korzystałem z listy z mieszaniną listy uporządkowanej i list nieuporządkowanych. treść: brak ścisłego cytatu wydaje się dziwną rzeczą do dodania Wiem, ale działa ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}
Benjarlett
źródło
0

Dla mnie działało:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

Spójrz na: http://jsfiddle.net/rLebz84u/2/

lub ten http://jsfiddle.net/rLebz84u/3/ z więcej i uzasadnionym tekstem

Willy Wonka
źródło
Strata czasu na spojrzenie. Prawie identyczny z wcześniejszą odpowiedzią. Jedyną różnicą jest „)” na końcu znacznika.
juanitogan
0

jest to poprawny kod, jeśli chcesz najpierw potomnie zmienić rozmiar innego css.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

w pliku HTML.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>
Sandeep Kumar
źródło