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

当然可以。请查看此示例：http://jsfiddle.net/DygHA/

Answer 2

您只需要重新设置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/

Fyi ...在第二个实例.clsCatTree1 > a中，您说的是a的直接子项dd链接的样式。

样式定义列表

2 个答案: