孩子和父節點在HTML和CSS中的演示文稿

我iterate一些objects /文本節點或選項我應該說服務器端語言和彌補HTML。孩子和父節點在HTML和CSS中的演示文稿

每個節點可能有一個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

來源

2013-08-21 Masood Ahmad

我真的不能來一個解決方案。儘管我已經做了很多html css的東西 –

在你的CSS中使用div。對於

，在你的CSS中，你可以爲.parent和.parent .child設置位置 – Jean

我有很多其他人的建議。使用表格作爲其表格數據，使用UL，因爲它會給每個孩子一些邊緣的權利。使用div等好，沒有一個工作解決方案 –

我把它變成了筆：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; 
}

來源

2013-08-21 08:32:25 Pjetr

謝謝。所以表格不是一個好選擇，ULs是否是一種好的選擇？ –

孩子和父節點在HTML和CSS中的演示文稿

回答

相關問題