如何递归地缩进div ?

I'm looking at a page of html code that follows this pattern:

我正在查看一个遵循此模式的html代码页面:

<div id='1' class='someclass'>
  contents
  <div id='2' class='someclass'>
    other contents
    <div id='3' class='someclass'>
      yet even more contents
    </div>
  </div>
</div>

I'm looking to indent the contents of the inner divs, without changing their class, such that the page will be displayed so:

我希望缩进内div的内容，而不改变它们的类，这样页面就会显示出来:

contents
  other contents
    yet even more contents

Is this feasible through manipulation of 'someclass'? If so, how?

通过操纵“someclass”是否可行?如果是这样,如何?

Note that the divs may contain some other, fairly simple html - such as headings, lists, etc...

注意，div可能包含一些其他的、相当简单的html——比如标题、列表等等……

3 个解决方案

#1

I think your looking for the following css rule

我认为您正在寻找以下css规则

.someclass { margin-left: 10px; }

For no indent on the first item

对于第一个项目没有缩进

.someclass .someclass { margin-left: 10px; }

#2

I'm not really sure if this is what you're after, but you can do the following:

我不太确定这是否是你想要的，但你可以做以下事情:

(sidenote: you should avoid starting a id or class with a number for crossbrowser compatibility)

(旁注:您应该避免使用一个数字来启动一个id或类，以满足跨浏览器的兼容性)

div#div1 div {
  margin-left:20px;
}

This will display and indent of 20px on all the div's inside the parent div with id div1.

这将在父div中使用id div1显示并缩进20px。

See this fiddle.

看到这个小提琴。

#3

You can do this, but it need create a container to cover it and give it a special ID like this :

你可以这样做，但是它需要创建一个容器来覆盖它并给它一个特殊的ID:

#yourContainer div {
  padding-left:0px; 
}

#yourContainer div > div {
   padding-left:5px; 
}

#yourContainer div > div > div {
    padding-left:10px;
}

HTML

<div id="yourContainer">
    <div id="1" class='someclass'>
      contents
      <div id="2" class='someclass'>
        other contents
        <div id="3" class='someclass'>
          yet even more contents
        </div>
      </div>
    </div>
</div>

if u want absolutly with class, try this

如果你想要绝对的上课，试试这个

#yourContainer .someclass {
  padding-left:0px; 
}

#yourContainer .someclass > .someclass {
   padding-left:5px; 
}

#yourContainer .someclass > .someclass > .someclass {
    padding-left:10px;
}

U can so, replace "padding-left" by "margin-left", it's u the boss ;-)

你可以这样，用“左桨”代替“左桨”，这是你的老板;

#1