web-dev-qa-db-fra.com

Listes commandées numérotées numériques dans HTML

J'ai une liste ordonnée imbriquée.

<ol>
  <li>first</li>
  <li>second
  <ol>
    <li>second nested first element</li>
    <li>second nested secondelement</li>
    <li>second nested thirdelement</li>
  </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

Actuellement, les éléments imbriqués commencent à nouveau de 1, par ex.

  1. premier
  2. seconde
    1. deuxième premier élément imbriqué
    2. deuxième deuxième élément imbriqué
    3. deuxième troisième élément imbriqué
  3. troisième
  4. quatrième

Ce que je veux, c'est que le deuxième élément soit numéroté comme ceci:

  1. premier

  2. seconde

    2.1. deuxième premier élément imbriqué

    2.2. deuxième deuxième élément imbriqué

    2.3. deuxième troisième élément imbriqué

  3. troisième
  4. quatrième

Y-a-t'il une façon de le faire?

jqueryhtmlcsshtml-lists
37
John

Voici un exemple qui fonctionne dans tous les navigateurs. L'approche PURE CSS fonctionne dans les navigateurs réels (c'est-à-dire tout mais IE6/7) et le code jQuery Code est de couvrir les non supportés. C'est en saveur d'un [~ # ~ # ~] [~ # ~] , vous pouvez simplement copier'n'paste'n'run IT sans changement.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2729927</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
                    $('ol ol').each(function(i, ol) {
                        ol = $(ol);
                        var level1 = ol.closest('li').index() + 1;
                        ol.children('li').each(function(i, li) {
                            li = $(li);
                            var level2 = level1 + '.' + (li.index() + 1);
                            li.prepend('<span>' + level2 + '</span>');
                        });
                    });
                }
            });
        </script>
        <style>
            html>/**/body ol { /* Won't be interpreted by IE6/7. */
                list-style-type: none;
                counter-reset: level1;
            }
            ol li:before {
                content: counter(level1) ". ";
                counter-increment: level1;
            }
            ol li ol {
                list-style-type: none;
                counter-reset: level2;
            }
            ol li ol li:before {
                content: counter(level1) "." counter(level2) " ";
                counter-increment: level2;
            }
            ol li span { /* For IE6/7. */
                margin: 0 5px 0 -25px;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>first</li>
            <li>second
                <ol>
                    <li>second nested first element</li>
                    <li>second nested second element</li>
                    <li>second nested third element</li>
                </ol>
            </li>
            <li>third</li>
            <li>fourth</li>
        </ol>
    </body>
</html>
36
BalusC

Aucune des solutions sur cette page ne fonctionne correctement et universellement pour tous les niveaux et paragraphes longs (emballés). Il est très difficile d'obtenir une indentation cohérente en raison de la taille variable de marqueur (1.2, 1.10, 1.10.5, ...); Il ne peut pas être juste "fumé", pas même avec une marge/un rembourrage précalculé pour chaque niveau d'indentation possible.

J'ai finalement compris une solution que fonctionne réellement et n'a pas besoin de JavaScript.

Il est testé sur Firefox 32, Chrome de 37, IE 9 et Android Navigateur. Ne fonctionne pas sur IE 7 et précédent.

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, ".") " ";
}

Exemple: example

Essayez-le sur jsfiddle , fourchez-le sur GIST .

8
Jakub Jirutka

Ce n'est pas possible dans Pure HTML/CSS. Voir la réponse de Balusc pour une excellente solution de réflexion sur la boîte de réflexion. Une liste des types de numérotation peut être trouvée à W3schools, ici .

L'option la plus proche que j'ai pu trouver est tilisation de l'attribut value, de W3C , mais le marquage suivant

<ol>
    <li value="30">
        makes this list item number 30.
    </li>
    <li value="40">
        makes this list item number 40.
    </li>
    <li>
        makes this list item number 41.
    </li>
    <li value="2.1">
        makes this list item number ...
    </li>
    <li value="2-1">
        makes this list item number ...
    </li>
</ol>

produit une liste numérotée de 30, 40, 41, 2 et 2.

Comme John l'a déjà souligné, votre meilleur pari va être des scripts, dans cette situation.

0
Pops

Avec un peu de peaufinage, vous devriez être capable d'adapter la technique utilisée ici (dans le deuxième exemple) pour la création de listes séquentielles.

0
Robert Harvey