html - html 和 css 中的子节点和父节点表示

Question

我应该通过服务器端语言说iterate一些objects/文本节点或选项并组成html。

每个节点可能有一个child或一个parent节点，以及一些选项，如复选框和单选按钮。

现在我面临的问题是如何显示这些节点的父子关系。

我想让每个孩子不要放在其父节点的右侧一点。

问题是要html / css 知道子节点的父节点，并使节点在父节点左边界的右侧移动一点。from尽管子父级水平移动，我希望复选框保持在一个垂直行顺序。

我更喜欢使用tables TDsover ULorOL LI但问题是。如何构建策略。

例子

text                    check box     check box     check box
text                    check box     check box     check box
text                    check box     check box     check box
  child text            check box     check box     check box
  child text            check box     check box     check box
    child text          check box     check box     check box
    child text          check box     check box     check box
      child text        check box     check box     check box
  child text            check box     check box     check box
text                    check box     check box     check box
text                    check box     check box     check box
  child text            check box     check box     check box

Answer 1

我把它变成了一支笔：http ://codepen.io/pjetr/pen/JjCha

HTML：

<ul>
  <li>
    <span class="label">text 1</span>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <ul>
      <li>
        <span class="label">text 1.1</span>
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <ul>
          <li>
            <span class="label">text 1.1.1</span>
            <input type="checkbox" />
            <input type="checkbox" />
            <input type="checkbox" />
          </li>
        </ul>
      </li>
    </ul>
  </ul>

CSS：

ul {
  list-style: none;
  padding-left: 5px;
}
ul ul {
  padding-left: 15px;
}
ul input {
  display: inline-block;
  float: right;
  margin-right: 5px;
}