html + CSS：使位置相对于其他一些元素？

Question

我正在使用普通方式列表中的列表构建树。 现在，我想做的是增加一个标签 这是绝对的（水平）到最外面的树的开始。

我想要实现的效果如下，其中farLeft是标签 在每个li上（见下面类似的html）：

我可以轻松地做到这一点，但至少可以说，我的css将是不洁净的 沿着这条线：

/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}

用法可能如下所示，但嵌套级别更多：

<ol class="topLevel">
  <li>
     <label>Some niceLabel</label>
     <label class="farLeft">Far left text</label>
  </li>
  <ol>
     <li>
        <label>Some niceLabel</label>
        <label class="farLeft">Far left text</label>
      </li>
  </ol>  
</ol>

以上很多方面很糟糕，特别是如果我搬东西的话，我必须在很多地方改变价值，而且每个缩进级别我必须做一行。

有没有更好的方法来解决这个问题，也许让我的'左'成为我顶层树的左边，或者其他一些好的html机制。

可能是时候提一下我是一个全新的css新手，所以我可能很容易 错过了somethnig完全明显。

Answer 1

'farLeft类是否在页面的其他地方使用？如果没有，那么简单的解决方案就是：

.farLeft { position: absolute; left:0px; ...}

绝对定位应该与它的父容器在0px处自动对齐。因此，如果你在它周围包裹一个相对定位的div，你应该能够调整边距以及诸如此类的东西来获得你想要的结果。

您不需要指定dom结构中的所有内容，除非您只希望它在那里应用，即使然后在标记上使用id也是更好的解决方案。祝你好运

Answer 2

这里是小提琴链接

http://jsfiddle.net/5YKFa/6/

CSS

ol.topLevel{
    padding-left: 100px;
}
li{
    padding-left: 20px;
}
.left {
    position: absolute; left:0px;
}

HTML

<ol class="topLevel">
  <label>Top Level</label>
  <li>
     <label class="left">Label</label>
     <label>1</label>
  <ol>
     <li>
       <label class="left">Label</label>
       <label>1.1</label>
     </li>
     <li>
       <label class="left">Label</label>
       <label>1.2</label>
     </li>
  </ol>  
  </li>
</ol>

Answer 3

您可以在嵌套的每个级别上使用边距，因此它会越深入。