Question

我必须建立一个分层系统

list
   item1
      item2
         item3

我的HTML如下：

<div class="first">
  <div class="second">
     <span class="third">Hello World</span>
  </div>
  <div class="second">
     <span class="third">Hello World2</span>
  </div>
  <div class="second">
     <span class="third">Hello World3</span>
  </div>
</div>

如何动态添加second div（使用Javascript），我如何编辑CSS以提供填充。

我的CSS是：

.first{
  display: inline-block;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.second{
  width: 100px;
  height: 20px;
  border: 1px solid green;
}

Link代码我可以完全编辑html和CSS。在此先感谢。

Answer 1

您可以将padding:10px;用于.second css类。

.second{
  width: 100px;
  height: 20px;
  padding:10px; 
  border: 1px solid green;
}

如果您想要一个层次结构，您可能希望将您的html更改为类似

的内容

<div class="first">
  <div class="second">
     <span class="third">Hello World</span>
      <div class="second">
        <span class="third">Hello World2</span>
          <div class="second">
          <span class="third">Hello World3</span>
         </div>
      </div>
  </div>
</div>

然后添加

.second{
  width: 100px;
  height: 20px;
  border: 1px solid green;
  margin-left:20px;
}

注意margin-left:20px;。

Answer 2

尝试使用此代码可能对您有所帮助。

$(document).ready(function(){
var l = $('.second').length;
for(var i=0; i<=l;i++){
     .second:nth-child(i).css('padding',i+10);
  i = i+10;
 }
});

Answer 3

如果您使用的是Jquery，可以在下面添加代码，为每个div添加填充。

$(document).ready(function(){
        $("div").each(function(index, item){
            $(item).css('padding-left', (index * 10 )  + "px");    
        });
    });

如何为每个动态添加的兄弟添加填充？

3 个答案: