原文地址，排版更好https://blog.codelabo.cn/article/5ce4f0eb8aab210ff34d0150https://xboxyan.codelabo.cn/post/css-tree-padding/中平时的项目，我们经常会遇到这样的布局，姑且称之为多级菜单吧（截图来自ant-design）。这种布局也很容易，大概是这样的，ul和li是嵌套的，如下Navigation01
Navigation02
所以你得到以下非常原始的风格。经过简单的修改，就可以达到上面的效果。当然，这很容易。一般来说，我们通过设置内边距来实现。例如，默认为ul{padding-left:40px;}。然后每一层都随着父层逐渐积累，然后实现。层次越深，从左边缩进的效果越多。通过上面的布局和样式，可以明显看出每一项的选择范围是逐渐缩进的。但是，设计者可能觉得不好看，所以往往设计成栏目形式，比如上面的ant-design那么，如何处理呢？首先，一个很自然的想法是去掉ul的padding，而是为每个子项指定paddingul.parent{padding:0;}，然后直接在html上写内边距，如下Navigation01
