樣式定義列出

Question

我想樣式由系統生成的購物車，所以我不能更改HTML代碼，而且這是怎麼產生的類別列表：

<dl id='dlCatLvl1' class='clsCatLvl1 clsOffCat1'> 
<dd class='clsCatTree1 clsCTree1' id=CatImg1> 
    <a href='#'>Apparel</a> 
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg4><a href='#'>T-Shirts</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg5><a href='#'>Jackets</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg6><a href='#'>Hoodies</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg7><a href='#'>Polos</a></dd> 
    </dl> 
</dd> 
<dd class='clsCatTree1 clsCTree1' id=CatImg2> 
    <a href='#'>Novelties</a> 
    <dl id='dlCatLvl2' class='clsCatLvl2 clsOffCat2'> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg8><a href='#'>Key Chains</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg9><a href='#'>Stationery</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg10><a href='#'>Umbrellas</a></dd> 
     <dd class='clsCatTree2 clsCTree2' id=CatImg11><a href='#'>Wristbands</a></dd> 
    </dl> 
</dd> 
<dd class='clsCatTree1 clsCTree1' id=CatImg3> 
    <a href='#'>Hats</a> 
</dd> 
</dl> 

我」什麼米試圖完成是有1級（服裝，新奇，帽子）和他們各自的2級類別並列，而不是每個級別是在自己的路線。

我基本上希望它看起來像這樣：http://jsfiddle.net/vUbuW/1/

我不知道爲什麼他們選擇建立這個如此可怕，但是這是我的工作。

這與目前的結構甚至可能嗎？

謝謝

Answer 1

你只需要rejig你的CSS來匹配您的HTML類

.clsCatTree1{ 
    width: 120px; 
    margin: 0 5px; 
    padding: 10px; 
    float: left; 
    border: 1px solid black; 
} 

.clsCatTree1 > a{ 
    font-weight: bold; 
    font-size: 1.2em; 
} 

例子：http://jsfiddle.net/vUbuW/2/

據透露......在第二種情況下，.clsCatTree1 > a，你是說風格a鏈接是dd的直接子。

Answer 2

當然可以。檢查這個例子：http://jsfiddle.net/DygHA/