Question

我有一个函数可以创建一个像这样的任意深度无序列表（中间有东西）。 HTML输出看起来像;

<ul class="side-nav-level-0">
     <ul class="side-nav-level-1">Stuff</ul>
     <ul class="side-nav-level-1">Stuff</ul>
     <ul class="side-nav-level-1">Stuff
         <ul class="side-nav-level-2">More Stuff</ul>
             <ul class="side-nav-level-3">Even More Stuff</ul>
         </ul>
     </ul>
     <ul class="side-nav-level-1">Stuff</ul>
</ul>

我正在使用CSS通配符来选择ul类

ul[class^='side-nav-level-'] { styling }

这适用于选择所有类，但我希望像这样缩进列表

-Stuff
-Stuff
-Stuff
    -More Stuff
        -Even More Stuff
-Stuff

目前它看起来像这样

-Stuff
-Stuff
-Stuff
-More Stuff
-Even More Stuff
-Stuff

如何使用CSS增加增量类来增加左边填充？我正在考虑使用nth-child，但我无法考虑每次如何增加填充大小。

我的最后一个选择是内联函数中的样式，但我很好奇是否有CSS解决方案。

Answer 1

使用padding-left有什么问题？

ul[class^='side-nav-level-']{
    margin: 0; /* reset browsers default margin styles*/
    padding-left: 20px; /* add some padding value */
}

<ul class="side-nav-level-0">
    <ul class="side-nav-level-1">Stuff</ul>
    <ul class="side-nav-level-1">Stuff</ul>
    <ul class="side-nav-level-1">Stuff
        <ul class="side-nav-level-2">More Stuff
            <ul class="side-nav-level-3">Even More Stuff</ul>
        </ul>
    </ul>
    <ul class="side-nav-level-1">Stuff</ul>
</ul>

注意：您未关闭<ul>

上的.side-nav-level-3

<ul class="side-nav-level-3">Even More Stuff<ul>
                                         ---^---

使用通配符增加填充

1 个答案: