Html 样式定义列表

我正在尝试设置由系统生成的购物车的样式，以便无法更改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>

我试图做到的是让一级类别的服装、新奇品、帽子和它们各自的二级类别并排排列，而不是每个级别都在自己的线上

我基本上希望它看起来像这样：

我不知道他们为什么选择如此可怕地建造这个，但这就是我必须要解决的问题

在目前的结构下，这可能吗

---

谢谢

没问题。检查此示例：

确定。检查此示例：

您只需要重新调整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;
}

例如：

---

仅供参考。。。在第二个例子中，.clsCatTree1>a，您是说样式是dd的直接子链接。

您只需要重新调整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;
}

例如：

仅供参考。。。在第二个例子中，.clsCatTree1>a，您说的是样式a链接，它是dd的直接子级