CSS樹視圖（嵌套列表），顯示爲表

Question

我想獲得一個表格，顯示HTML結構的嵌套列表+ dl/dt/dd列表作爲給定行的單元格。

到目前爲止，這裏是我可以做什麼：

隨着代碼：

<ul class="treeview"> 
    <li> 
    <dl> 
     <dt>item1</dt> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
    </dl> 
    <ul> 
     <li class="last"> 
     <dl> 
      <dt>subitem</dt> 
      <dd> 
      <input type="checkbox" /> 
      </dd> 
      <dd> 
      <input type="checkbox" /> 
      </dd> 
      <dd> 
      <input type="checkbox" /> 
      </dd> 
     </dl> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <dl> 
     <dt>item2</dt> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
     <dd> 
     <input type="checkbox" /> 
     </dd> 
    </dl> 
    </li> 
</ul> 

和CSS：

ul.treeview li dl dt, 
ul.treeview li dl dd { 
    display: inline-block; 
} 

ul.treeview li dl dt { 
    width: 200px; 
} 

ul.treeview li dl dd { 
    width: 50px; 
} 

https://jsfiddle.net/wt6gd2f2/

的問題是與嵌套列表，爲此c heckboxes不與子級列表對齊。任何想法如何做到這一點？

Answer 1

這主要是因爲默認的填充和邊距，所以你必須先重置那些。

嵌套李（新的默認填充，你可以設置爲其它）：

li ul { padding-left:25px; } 

DD：

ul.treeview li dl dd { margin:0; } 

...你現在可以添加陰性切緣（到第一！ ）DD要拿左：

ul.treeview li ul dl dd:first-of-type { margin-left:-25px; } 

您能只是跳到最後一行，但由於每個瀏覽器都有自己的默認邊距/填充，所以自己設置縮進可能會更好。

新建CSS：

ul.treeview li dl dt, 
ul.treeview li dl dd { 
    display: inline-block; 
} 

ul.treeview li dl dt { 
    width: 200px; 
} 

ul.treeview li dl dd { 
    width: 50px; 
    margin: 0; 
} 

ul.treeview li ul { 
    padding-left: 25px; 
} 

ul.treeview li ul dl dd:first-of-type { 
    margin-left:-25px; 
}