Question

我正在为导航/列表编写CSS，我希望将每个子级别的列表项错开5px，然后我开始编写：

    .panel ul li ul li a { padding:6px 0 6px 20px !important; background-color:#333; background-position:10px center; }
    .panel ul li ul li ul li a { padding:6px 0 6px 25px !important; background-color:#444; background-position:15px center; }
    .panel ul li ul li ul li ul li a { padding:6px 0 6px 30px !important; background-color:#555; background-position:20px center; }
    .panel ul li ul li ul li ul li ul li a { padding:6px 0 6px 35px !important; background-color:#666; background-position:25px center; }
    .panel ul li ul li ul li ul li ul li ul li a { padding:6px 0 6px 40px !important; background-color:#777; background-position:30px center; }

并认为“这是荒谬的，必须有一种更好的方法”，无论多少级别都可以保持缩进。

任何意见都会受到赞赏。

由于

Answer 1

使用纯CSS，没有更好的方法可以做到这一点。我建议使用LESS，让你以嵌套的形式编写CSS，例如

.panel {
    ul {
        li {
            a {
                padding:6px 0px 6px 20px;
            }
            ul {
                li {
                    a{...}
                } 
            }
       }
    }
 }

Answer 2

jquery是关键:) 没有尝试下面的代码。但它应该与此类似。

$('.panel li').each( function(){
var myPadding = $(this).parent.css('padding') + 5;
$(this).css('padding' , myPadding );})

为列表编写CSS的更好方法

2 个答案: