Numerowanie w formacie HTML/CSS

Question

Czy mogę to zrobić w html/css?

1. 
1.1 
1.2 
2. 
2.1 
2.2 

przy użyciu znaczników LI i UL?

Answer 1

Tak, patrz: https://developer.mozilla.org/en/CSS_Counters Ale to nie działa na wszystkich przeglądarkach/

Answer 2

Nie ma mowy, cross-browser to zrobić.

Najlepiej można to osiągnąć jest zagnieżdżony nakazał list:

<ol> 
    <li>Item 1 
     <ol> 
      <li>Subitem 1</li> 
     </ol> 
    </li> 
</ol> 

a następnie styl każdej listy zagnieżdżone mieć inny typ:

ol { 
    list-style-type: upper-roman; 
} 
ol ol { 
    list-style-type: decimal; 
} 

nadzieję, że to pomaga!

Answer 3

Należy rozważyć użycie DL/DT/DD zamiast OL/UL i zakodować wartości w DT.

Answer 4

CSS 2.1 udostępnia definiowane przez użytkownika liczniki, które mogą być używane do zliczania elementów. W połączeniu z pseudo-klasami: before i: after możesz wyprowadzać wartość licznika, aby tworzyć automatycznie numerowane nagłówki.

Niestety, przynajmniej Internet Explorer nie obsługuje żadnego z powyższych, nawet w najnowszej wersji. Ale przynajmniej Firefox obsługuje go bardzo dobrze, więc jeśli chcesz go dodać jako ulepszenie, które nie sprawi, że twoja strona stanie się bezużyteczna, jeśli nie będzie obsługiwana, nadal możesz z niego korzystać.

Answer 5

Dla CSS2 przeglądarki można użyć

ul { counter-reset:item; } 
ul > li { counter-increment:item; } 
ul > li:before {content: counter(item); } 

ul > li > ul { counter-reset:subitem; } 
ul > li > ul > li { counter-increment:subitem; } 
ul > li > ul > li:before { content: counter(item) "." counter(subitem); } 

Answer 6

http://www.w3.org/TR/CSS2/generate.html

Ale, tak, to jest tylko dla nowoczesnych przeglądarek. Zagnieżdżone OL to prawdopodobnie droga.

Answer 7

kod html:

<ul> 
    <li>1 </li>   
    <li>1.1</li>  
    <li>1.2</li>  
    <li>2 </li>     
    <li>2.1</li> 
    <li>2.2</li> 
</ul> 

kod css:

li { list-style:none; } 

Answer 8

Jedna linia javascript będzie to zrobić. Używany w spisie treści:

<td class="session"> 
<script> 
{document.getElementsByClassName("session")[num].innerHTML = "1." + (++num);} 
</script> 
</td> 

num jest zmienną globalną w dokumencie inicjowane na zero w odpowiednim miejscu upstream. Powyższe daje 1,1 w pierwszej instancji. Zmień na num ++ i uzyskaj 1.0.