Количество вложенных упорядоченных списков в HTML - PullRequest
Новая
       63

Количество вложенных упорядоченных списков в HTML

37 голосов
/ 28 апреля 2010

У меня есть вложенный упорядоченный список. 

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

В настоящее время вложенные элементы снова начинаются с 1, например,

  1. первый
  2. второй
    1. второй вложенный первый элемент
    2. второй вложенный второй элемент
    3. второй вложенный третий элемент
  3. третий
  4. четвёртый

Я хочу, чтобы второй элемент был пронумерован следующим образом:

  1. первый

  2. второй

    2,1. второй вложенный первый элемент

    2,2. второй вложенный второй элемент

    2,3. второй вложенный третий элемент

  3. третий
  4. четвёртый

Есть ли способ сделать это?

Ответы [ 6 ]

35 голосов
/ 28 апреля 2010

Вот пример, который работает во всех браузерах. Чистый CSS-подход работает в реальных браузерах (то есть во всех, кроме IE6 / 7), а код jQuery предназначен для покрытия неподдерживаемых. Это аромат SSCCE , вы можете просто скопировать и запустить его без изменений. 

<!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>
33 голосов
/ 14 сентября 2011

Я знаю, что уже поздно отвечать, но я только нашел пример того, как сделать это с помощью CSS. Добавьте это в свой раздел CSS (или файл): 

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

Вот пример того, как будет выглядеть ваш код списка: 

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

НТН

8 голосов
/ 07 октября 2014

Ни одно из решений на этой странице не работает правильно и универсально для всех уровней и длинных (завернутых) абзацев. Действительно сложно добиться последовательного отступа из-за переменного размера маркера (1., 1.2, 1.10, 1.10.5,…); его нельзя просто «подделать», даже с предварительно вычисленным полем / отступом для каждого возможного уровня отступа.

Я наконец-то нашел решение, которое на самом деле работает и не нуждается в JavaScript.

Он протестирован на Firefox 32, Chromium 37, IE 9 и браузере Android. Не работает в IE 7 и более ранних версиях.

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

Пример: example

Попробуйте на jsFiddle , раскошелиться на Суть .

0 голосов
/ 08 мая 2013

В действительности, если вы использовали sass / scss в своем проекте для стилизации, вы можете использовать mixin для этого. Для оформления этого вложенного списка вам понадобятся только две строки кода 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>

Полный пример, который вы можете клонировать / смотреть из git repo или сгенерированный CSS на fidle

0 голосов
/ 28 апреля 2010

С небольшой настройкой вы сможете адаптировать методику, используемую здесь (во втором примере) для создания последовательных списков.

0 голосов
/ 28 апреля 2010

Это невозможно в чистом HTML / CSS. См. Ответ BalusC для отличного продуманного решения. Список типов нумерации можно найти в w3schools, здесь .

Ближайший вариант, который мне удалось найти, - это использование атрибута value из w3c , но со следующей разметкой 

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

создает список с номерами 30, 40, 41, 2 и 2.

Как уже отмечал Джон, в этой ситуации лучшим вариантом будет сценарий.

...