我们如何根据元素深度设置 CSS Margin？答案

【问题标题】：How could we set CSS Margin according element depth?我们如何根据元素深度设置 CSS Margin？
【发布时间】：2014-04-01 21:35:19
【问题描述】：

我有以下 html 结构 -

<ul>
    <li><span>1st</span>
        <ul>
            <li><span>2nd</span>
                <ul>
                    <li><span>3th</span>
                        <ul>
                            <li><span>4th</span>
                                <ul>
                                    <li><span>5th</span>
                                        <ul>
                                           ... 
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

并且想要这样输出 -

为此，我使用了具有以下类的 CSS 子选择器 -

ul li span
{
    padding-left:0px;
}


ul li > ul li span
{
    padding-left:10px;
}

ul li > ul li > ul li span
{
    padding-left:20px;
}

ul li > ul li > ul li > ul li span
{
    padding-left:30px;
}

ul li > ul li > ul li > ul li > ul li span
{
    padding-left:40px;
}

Demo

它工作完美，但在这里我想使用任何速记 CSS 技巧（不是上面的父子结构，即 ul li > ul li > ul li > ul li....）来获得我想要的输出。因为在我的网页上我有N-levels 的UL-LI 结构。而且我不想定义N-levels CSS 类来设置边距。

意思是我不想用 N-levels 这样的结构来定义我的类 -

ul li > ul li > ul li > ul li > ul li > .....  > (n-1)ul li > ul li span
    {
        padding-left:(n) * 10px; //-- Set margin according level
    }

那么，CSS 中有什么方法可以完成这项工作吗？

如果不是，我可以使用Jquery 来做到这一点，怎么做？

我不想要这个 -

我希望每个子节点都像这样从“0px”开始 -

提前感谢大家，任何帮助都将是可观的...... !!!

【问题讨论】：

看这里，没有任何css，输出就是你需要的：jsfiddle.net/Nqth9
@Sari Alalem：是的，你是对的。但我不想为我的 UL 提供边距或填充。因为我想设置border-bottom并且边框必须从“0px”开始意味着没有左边距和填充。
我不知道你是什么意思，jsfiddle示例没有给它任何边距css或填充css
@IshanJain 然后给<li> 一个左填充，因为它们是嵌套的，所以填充增长
@SariAlalem：请看这个小提琴jsfiddle.net/Nqth9/2。我不希望我的树看起来像（意味着我想要跨度边框没有左边距或填充）

标签： jquery css css-selectors

【解决方案1】：

只需将padding-left: 10px; 放在ul 本身上

【讨论】：

这个问题是它降低了样式的能力，这就是为什么它现在被标记.....

【解决方案2】：

使用 Jquery：

$('ul').each(function(index){
   $(this).find('span:first').css("padding-left",index*10+"px")
});

Working Demo

【讨论】：

您的代码运行良好。请参阅jsfiddle.net/2P6Aq/6。您可以在 Fiddle 中看到“6th”、“7th”、“8th” .. 等元素在 (index * 10 ) 方面占据优势。但我希望“6th”元素从 0 索引开始。你能帮我完成这个要求吗？
不，我不想要这个。请看我的问题-“部分->每个子节点都从“0px”开始”
不，它也没有完全满足我的要求。它不像我的第二张图片那样为我提供 o/p（请参阅底部边框）。

【解决方案3】：

$('ul').function(){
$(this).css('padding-left','10px')

}

【讨论】：