5

私は次の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/

ありがとう、

4

1 に答える 1

4

nav-item-contentパディング変数をインクリメントしながら、すべてのdivを簡単に選択し、それぞれを反復処理できるはずです。

jsfiddle

//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;
});

編集

子を追加する方法のデモを追加しました: jsfiddle。

于 2013-06-11T16:39:46.400 に答える