我有以下css:
.navi-live ol{
margin:0;
padding:0;
list-style-type: none;
}
.navi-live li{
margin:0;
padding:0px;
list-style-type: none;
}
.navi-live ol .nav-item-contents{
padding-left:20px;
}
.navi-live ol ol .nav-item-contents{
padding-left:40px;
}
.navi-live ol ol ol .nav-item-contents{
padding-left:60px;
}
.navi-live ol ol ol ol .nav-item-contents{
padding-left:80px;
}
.navi-live ol ol ol ol ol .nav-item-contents{
padding-left:100px;
}
这是有效的(我不想缩进li或ol,但缩进内容就像li和ol缩进一样),但是限制了我创建的css规则的数量.
如何进行上述操作而不必为每个我想支持的新缩进级别创建新规则?
jsfiddle:http://jsfiddle.net/k4hjp/1/
谢谢,
最佳答案
您应该能够简单地选择所有nav-item-content div,在递增填充变量的同时迭代每个div.
//put this inside a function and call it when you want to append to the navigation
var padding = 20;
$('.nav-item-contents').each(function(){
$(this).css('padding-left',padding+'px');
padding+=20;
});
编辑
原文地址:https://www.jb51.cc/css/427151.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。