Списки определений стилей - PullRequest
Новая
       6

Списки определений стилей

1 голос
/ 15 декабря 2011

Я пытаюсь оформить корзину покупок, сгенерированную системой, поэтому я не могу изменить 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/

Я понятия не имею, почему они решили построить это так отвратительно, но это то, с чем мне приходится работать.структура?

Спасибо

Ответы [ 2 ]

2 голосов
/ 15 декабря 2011

Вам просто нужно изменить настройки 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 голосов
/ 15 декабря 2011

Конечно.Проверьте этот пример: http://jsfiddle.net/DygHA/

...