8

我正在查看遵循此模式的 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>

我希望缩进内部 div 的内容，而不更改它们的类，以便页面显示如下：

contents
  other contents
    yet even more contents

这是否可以通过操纵“某类”来实现？如果是这样，怎么做？

请注意，div 可能包含其他一些相当简单的 html - 例如标题、列表等...

4

3 回答 3

12

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

.someclass { margin-left: 10px; }

对于第一项没有缩进

.someclass .someclass { margin-left: 10px; }
于 2013-07-09T23:24:08.757 回答
1

我不确定这是否是您所追求的，但您可以执行以下操作：

（旁注：您应该避免以数字开头的 id 或类以实现跨浏览器兼容性）

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

这将在具有 id 的父 div 内的所有 div 上显示和缩进 20px div1。

看到这个小提琴。

于 2013-07-09T23:54:24.297 回答
0

你可以这样做，但它需要创建一个容器来覆盖它并给它一个特殊的 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>

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

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

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

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

你可以这样，用“margin-left”替换“padding-left”，这是你的老板;-)

于 2013-07-10T00:39:50.567 回答