2

我正在ul为我自己的个人网站使用导航，但我一生都无法弄清楚如何更改background-color整个li元素。如果你看看这个 fiddle，你可以看到我想要完成的事情。我到处寻找，但我还没有找到“突出显示”文本左侧区域的解决方案。此外，我不确定如何解释margin: 2px. 这是一些相关的CSS：

#nav li {
    margin:2px;
}

#nav li:hover {
    margin:2px; <-- does not affect where the background color changes, it seems
    background-color:#b5aec8;
}

有没有办法使用纯 CSS 更改整个导航背景？如果是这样，怎么做？任何建议表示赞赏！

4

2 回答 2

6

从您的小提琴中，只需从<ul>元素中删除填充并将其提供给<li>元素，然后将其完全着色。

#nav {
    width:80px;
    -moz-box-shadow: 0px 3px 5px #888;
    -webkit-box-shadow: 0px 3px 5px #888;
    box-shadow: 0px 3px 5px #888;
    position: fixed;
    left:0;
    padding-left: 0px; /* ******* Changed to 0 */
    top:0;
    margin-top:25%;
    list-style: none;
    background-color: #ccc;
    color:black;
    font-family:Helvetica;
    z-index: 1;

}

#nav ul {
    list-style: none;
    padding-left:0px;
}

#nav a {               
    text-decoration:none;
    color:black;
}

#nav li {
    margin:2px;
    padding-left: 10px; /* ******* Returned to this element here */
}

#nav li:hover {
    margin:2px;
    background-color:#b5aec8;
}

请参阅此处的示例。

于 2012-07-23T00:53:13.743 回答
2

考虑这个答案：这将padding在保留您的要求li的同时放置其中。anchormargin

参考： jsFiddle

于 2012-07-23T01:13:37.313 回答