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

Question

我正在以普通方式使用列表中的列表构建一棵树。 现在，我想做的是有一个额外的标签 这是绝对（水平）到最外面的树的起点。

我想要实现的效果如下，其中最左边是标签 在每个 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 新手了，所以我可能很容易有 错过了一些完全明显的事情。

Answer 1

这里是它的小提琴链接

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 2

您可能可以在嵌套的每一层上使用边距，这样嵌套的深度就会变大。

Answer 3

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

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

绝对定位应自动与其父容器在 0 像素处对齐。因此，如果您将一个相对定位的 div 包裹在其周围，您应该能够调整边距等以获得您想要的结果。

你不需要指定所有内容在 dom 结构中的位置，除非你只想将其应用到那里，即使这样，在标签上使用 id 将是一个更好的解决方案。祝你好运