Вопросы Теги

Число вложило заказанные списки в HTML

У меня есть вложенный заказанный список.

<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. четвертый

Существует ли способ сделать это?

37
задан animuson 26 February 2012 в 21:06
поделиться

3 ответа

Вот пример, который работает во всех браузерах. Подход на чистом 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>
35
ответ дан 27 November 2019 в 04:33
поделиться

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

0
ответ дан 27 November 2019 в 04:33
поделиться

Это невозможно в чистом 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.

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

0
ответ дан 27 November 2019 в 04:33
поделиться