我正在为自己的个人网站使用ul
导航,但我不能为我的生活找出如何更改整个background-color
元素的li
。如果你看this 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更改整个导航背景?如果是这样,怎么样?任何建议都表示赞赏!
答案 0 :(得分: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;
}
答案 1 :(得分:2)
请考虑以下答案:这会将padding
置于li
的{{1}}内,同时保留您的anchor
要求。
参考: jsFiddle