我iterate
一些objects
/文本节点或选项,应该用服务器端语言说,并组成html。
每个节点可能有一个child
或parent
节点,以及某些选项,例如复选框和单选按钮。
现在我面临的问题是如何显示这些节点的子母关系。
我想让每个孩子不要在其父节点的右边放置一些。
问题是要使html / css
知道子节点的父节点,并使该节点向右移动from
父节点的左侧边界。我希望尽管子级父级水平移动,复选框也保持垂直线顺序。
我宁愿使用tables TDs
而不是UL
或OL 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;
}