Nombre de listes ordonnées imbriquées en HTML

Question

Nombre de listes ordonnées imbriquées en HTML

Demandé el 28 de Avril, 2010: Quand la question a-t-elle été
16977 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un imbriquée liste ordonné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 repartir de nouveau en 1, par exemple

première
deuxième
1. deuxième imbriquée premier élément
2. deuxième imbriquée deuxième élément
3. deuxième troisième élément imbriqué
troisième
quatrième

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

première
deuxième

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

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

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

Est-il un moyen de faire cela?

Demandé el 28 de Avril, 2010 par John

Answer 1

5 Réponses

Answer 2

35voto

BalusC Points 498232

Voici un exemple qui fonctionne dans tous les navigateurs. L’approche CSS pure fonctionne dans les navigateurs réels (c’est-à-dire tout sauf IE6 / 7) et le code jQuery est destiné à couvrir les utilisateurs non pris en charge. C'est à la saveur d'un SSCCE , vous pouvez simplement le copier / coller sans le modifier.

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

Répondu el 28 de Avril, 2010 par BalusC (498232 Points )

Answer 3

33voto

Alexandre Points 658

Je sais qu'il est tard pour répondre, mais je viens de trouver un exemple d'utilisation de CSS. Ajoutez ceci à votre section CSS (ou fichier):

 ol.nested
{
    counter-reset: item
}
li.nested
{
    display: block
}
li.nested:before
{
    content: counters(item, ".") ". ";
    counter-increment: item
}

Voici un exemple de votre code de liste:

 <ol class="nested">
<li class="nested">item 1</li>
<li class="nested">item 2
    <ol class="nested">
        <li class="nested">subitem 1</li>
        <li class="nested">subitem 2</li>
    </ol></li>
<li class="nested">item 3</li>
</ol>

HTH

Répondu el 14 de Septembre, 2011 par Alexandre (658 Points )

Answer 4

0voto

alexche8 Points 309

Si vous avez utilisé sass / scss dans votre projet pour le style, vous pouvez utiliser mixin pour cela. Pour styliser cette liste imbriquée, vous n'avez besoin que de deux lignes de code Sass.

 @import 'nested_list'
+nested_list('nested', 2)

<ol>
  <li>first</li>
  <li>second
      <ol class="nested-2">
          <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>

Exemple complet, vous pouvez cloner / regarder depuis git repo ou générer des CSS sur fidle

Répondu el 8 de Mai, 2013 par alexche8 (309 Points )

Answer 5

0voto

Pops Points 10137

~~Ce n'est pas possible dans le plus pur HTML/CSS.~~ Voir BalusC de réponse pour une grande pensée-dehors-de-le-boîte de solution. Une liste de numérotation des types de peut être trouvé à w3schools, ici.

L'option la plus proche, j'ai pu trouver est l'utilisation de l' value d'attribut, du w3c, mais le balisage 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 30, 40, 41, 2 et 2.

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

Répondu el 28 de Avril, 2010 par Pops (10137 Points )

Answer 6

0voto

Robert Harvey Points 103562

Avec quelques ajustements, vous devriez pouvoir adapter la technique utilisée ici (dans le deuxième exemple) pour créer des listes séquentielles.

Répondu el 28 de Avril, 2010 par Robert Harvey (103562 Points )

Nombre de listes ordonnées imbriquées en HTML

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Nombre de listes ordonnées imbriquées en HTML

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: