Question

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

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

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

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

问题是让html / css 知道是子节点的父级，并使节点向右移动侧 {{1父母留下边界。我希望尽管父级水平移动，复选框仍保持一个垂直线顺序。

我希望from使用tables TDs或UL，但问题是。如何制定战略。

实施例

OL LI

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;
}

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

1 个答案: