Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > вложенные списки

Автор: zFermer 21.1.2012, 20:13

есть пример:

Код


<ol>
    <li class="_NLI">aaa</li>
    <li class="_NLI">
        aaa
        <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
        </ul>
    </li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">aaa</li>
    <li class="_NLI">
        aaa
        <ol>
            <li class="_NLI">
                aaa
                <ol>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">
                        aaa
                        <ul>
                            <li>aaa</li>
                            <li>aaa</li>
                            <li>aaa</li>
                        </ul>
                    </li>
                </ol>
            </li>
            <li class="_NLI">aaa</li>
        </ol>
    </li>
    <li class="_NLI">aaa</li>
</ol>

<ul>
    <li>
        aaa
        <ol>
            <li class="_NLI">
                aaa
                <ol>
                    <li class="_NLI">aaa</li>
                    <li class="_NLI">
                        aaa
                        <ul>
                            <li>aaa</li>
                            <li>
                                aaa
                                <ol>
                                    <li class="_NLI">aaa</li>
                                </ol>
                            </li>
                            <li>aaa</li>
                        </ul>
                    </li>
                    <li class="_NLI">aaa</li>
                </ol>
            </li>
            <li class="_NLI">aaa</li>
            <li class="_NLI">aaa</li>
            <li class="_NLI">aaa</li>
        </ol>
    </li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

и css код:

Код


li{ list-style-position: inside; list-style-type: none !important; }
ol{ counter-reset: list1; }
ol ._NLI:before{ counter-increment: list1; content: counter(list1) ". "; }
ol ol{ counter-reset: list2; }
ol ol ._NLI:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol ol ol{ counter-reset: list3; }
ol ol ol ._NLI:before{ counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }
ol ol ol ol{ counter-reset: list4; }
ol ol ol ol ._NLI:before{ counter-increment: list4; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) ". "; }
ol ol ol ol ol{ counter-reset: list5; }
ol ol ol ol ol ._NLI:before{ counter-increment: list5; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) "." counter(list5) ". "; }
ol ol, ol ul, ul ul, ul ol{ margin: 0 0 0 10px; }
ul li:before{ content: "• "; }

Хотелось сдлеать универсально чтобы любые списки в любые вставлять можно было. Но вот не могу решить проблему клгда списки нумерные чередуються с не нумерными.
Проблема в том что стиль игнорирует что между тегами ol и ol еще находиться тег ul и продолжает нумерацию (как во втором списке) можно ли какнибут ьрегить эту проблему? или мб есть уже готовое решение более элегантное на css?

Автор: SelenIT 22.1.2012, 03:09

Как вариант, отслеживать всю цепочку:

Код


ol > li > ol { counter-reset: list2; }
ol > li > ol > ._NLI:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol > li > ol > li > ol { counter-reset: list3; }
ol > li > ol > li > ol > ._NLI:before { counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }

и т.д.

Но лично я не вижу смысла в такой уже универсальности, чтобы ради этого было оправдано такое раздувание CSS и усложнение селекторов. Имхо, многоуровневый нумерованный список — задача довольно штучная (кроме чего-то типа оглавления, особых "юзкейсов" на ум и не приходит), для него вполне можно и каждому уровню класс задать...

Автор: zFermer 22.1.2012, 15:23

Спасибо большое, избавился от класса _NLI я догадывался что должна быть эта ">" только не омг найти какже она именно пишеться. Спасибо!

В проекте именно постоянно такие списки поэтому и использую.

Конечный вариант

Код


li{ list-style-position: inside; list-style-type: none !important; list-style-type: decimal; }
ol{ counter-reset: list1; }
ol > li:before{ counter-increment: list1; content: counter(list1) ". "; }
ol > li > ol{ counter-reset: list2; }
ol > li > ol > li:before{ counter-increment: list2; content: counter(list1) "." counter(list2) ". "; }
ol > li > ol > li > ol{ counter-reset: list3; }
ol > li > ol > li > ol > li:before{ counter-increment: list3; content: counter(list1) "." counter(list2) "." counter(list3) ". "; }
ol > li > ol > li > ol > li > ol{ counter-reset: list4; }
ol > li > ol > li > ol > li > ol > li:before{ counter-increment: list4; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) ". "; }
ol > li > ol > li > ol > li > ol > li > ol{ counter-reset: list5; }
ol > li > ol > li > ol > li > ol > li > ol > li:before{ counter-increment: list5; content: counter(list1) "." counter(list2) "." counter(list3) "." counter(list4) "." counter(list5) ". "; }
ul > li:before{ content: "• "; }
ol ol, ol ul, ul ul, ul ol{ margin: 0 0 0 10px; }