Question

这是一个基本的场景（我不是这样做来专门对齐文本，但div有很多其他内容，所以不要告诉我这不是最合适的文本对齐方式：D我'我对这里的原则更感兴趣）;

<div id="1" class="mydivclass">
  <p>The first div</p>
  <div id="2" class="mydivclass">
    <p>The second div</p>
    <div id="3" class="mydivclass">
      <p>The third div</p>
    </div>
  </div>
</div>

使用css，我可以使用相同的类将div设置为子div（div中的div），将它们自定位在页面上，相对于它的父级吗？所以我希望上面的输出看起来像这样：

The first div
  The second div
    The third div

我想知道我是否可以，如果是这样，使用CSS实现这一目标？例如，你可以使用类似下面的内容来填充每个子div比父对象多10个像素，以得到上述结果吗？

.mydivclass {
  padding-left: 10px;
}

因此，通过在每个div上嵌套相同的CSS类，它们会慢慢递增它们的水平对齐。

Answer 1

你的意思是position:relative;和left这样的组合吗？ http://jsfiddle.net/EUTPB/

Answer 2

不使用仅由IE支持的表达式。要做你想做的事，你必须使用像position:relative和left这样的东西。

Answer 3

这是一个严重的问题吗？显然你可以，如果你真的尝试一下。以下是您的操作代码：https://dl.dropbox.com/u/73603348/nesting.html

CSS：将子项与相同类的父项相对

3 个答案: