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

每个节点可能有一个childparent节点,以及某些选项,例如复选框和单选按钮。

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

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

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

我宁愿使用tables TDs而不是ULOL 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

最佳答案

我把它变成了一支笔: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;
}

10-05 20:33
查看更多