使用CSS在"LI"项目上设置选择颜色和选择指示器

Question

In http://jsfiddle.net/BZKMD/

我正在尝试使用li.selected将背景颜色设置为#f5f5f5并显示绿色指示器栏。但我只能展示两者之一。

我将如何展示它们？

如果您无法访问 jsfiddle，以下是代码：

<ul class="nav-items">
<li class="selected">Home</li>
</ul>
ul.nav-items {
width: 100%;
height: 50px;
list-style: none;
margin: 0 25px 0 0;
display: table;
}
ul.nav-items li {
width: 100px;
height: 100%;
border: 1px green dotted;
float: left;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 50px;
font-family:'PT Sans', sans-serif;
}
ul.nav-items li a {
text-decoration: none;
color: black;
}
ul li.selected {
background-color: #f5f5f5;
}
ul li.selected {
position: relative;
height: 6px;
background-color: #88991A;
}

Answer 1

您使用另一个选择器覆盖background-color，您应该使用border-top而不是背景"来指示活动选项卡

ul li.selected {
background-color: #f5f5f5;
position: relative;
border-top: 6px solid #88991a;
}

演示

---

当您不需要border非活动选项卡时，也可以使用border但使用透明color来平衡偏移量，就像border-top: 6px solid transparent; /* For inactive tabs */

---

我将如何实现这一点？

我会使用:before伪contentposition: absolute;设置在relative定位li

ul li.selected:before {
content: "";
position: absolute;
border-top: 6px solid #88991a;
width: 100%;
left: 0;
}

演示 2

---

注意：您正在使用一些冗余属性，例如display: table-cell;withfloat: left;，其中只需要一个属性，而不是vertical-align: middle;和line-height: 50px;

演示 3(删除了多余的无用属性)