фон li над родительским элементом ul - PullRequest
Новая
       2

фон li над родительским элементом ul

0 голосов
/ 08 июня 2011

Кто-нибудь знает, возможно ли расширение фонового изображения li по ширине родительского ul?

Вот мой css. 

.sideNavigation {
    position: relative;
    background: url(images/sidebarBorderRight.png) top right no-repeat;
}

.sideNavigation li {
    position: relative;
    margin: 0;
    width: 225px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #DDD;
    font-size: 12px;
}

.sideNavigation li.active {
    position: relative;
    height: 44px;
    line-height: 44px;
    background: url(images/subnavActive.png) no-repeat;
}

и пример HTML 

<ul class="sideNavigation">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

Мне бы хотелось, чтобы фон li.active отображался по всей ширине ul, а остальные элементы li оставались на их текущей ширине.

1 Ответ

0 голосов
/ 08 июня 2011

Да, это возможно.

Просто задайте фиксированный размер для ul и большие размеры для li, и, возможно, установите display: block для li, и все будет готово. Вы также можете поиграть с отрицательной наценкой.

...