divでCSSツリーを作成する

Question

私はこのエフェクトを作成しようとしています：http://www.thecssninja.com/demo/css_tree/問題は私がdivで出力のみで作業しているということです。だからol/ul。私はこれを行う方法を静かではない。ここにいます私が働いているコードの抜粋です：

<div class="jr_fieldDiv jr_exteriortype" style=""> 
    <label class="jrLabel">Exterior type</label> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_brick" data-click2add="0" value="brick">&nbsp;Brick</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_cement-concrete" data-click2add="0" value="cement-concrete">&nbsp;Cement/Concrete</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_composition" data-click2add="0" value="composition">&nbsp;Composition</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_metal" data-click2add="0" value="metal">&nbsp;Metal</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_shingle" data-click2add="0" value="shingle">&nbsp;Shingle</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_stone" data-click2add="0" value="stone">&nbsp;Stone</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_stucco" data-click2add="0" value="stucco">&nbsp;Stucco</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_vinyl" data-click2add="0" value="vinyl">&nbsp;Vinyl</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_wood" data-click2add="0" value="wood">&nbsp;Wood</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_wood-products" data-click2add="0" value="wood-products">&nbsp;Wood Products</div> 
    <div class="jr_fieldOption"> 
     <input type="checkbox" name="data[Field][Listing][jr_exteriortype][]" 
     id="jr_exteriortype_other" data-click2add="0" value="other">&nbsp;Other</div> 
    <div class="clr"></div> 
</div> 

Answer 1

リストは良いだろうが、それはあまりにもdivタグでこれを行うには問題なく可能です。あなたはOL/ULリスト構造を持っていたかのようにそれはあなたが簡単にスタイルすることができ、クラスのいくつかの助けを借りて構造が

<ul> 
    <li></li> 
    <li> 
     <ul> 
     <li></li> 
     </ul> 
    </li> 
</ul> 

または

<div class="parent"> 
    <div class="child"></div> 
    <div class="child parent"> 
     <div class="child"></div> 
    </div> 
</div> 

あり、それを問題ではありません。

Answer 2

コンポーネントが使用しているoverride the templateです。