css - 父 ul 元素上的 li 背景

Question

有人知道 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 元素保持为当前宽度。

Answer 1

是的，这是可能的。

只需给 ul 一个固定的尺寸，给 li 一个更大的尺寸，并可能为 设置 display: block li 你应该已经准备好了。您也可以选择使用负边距。