Question

中

我正在尝试使用#f5f5f5将背景颜色设置为li.selected并显示绿色指示条。但我只能展示其中的一个。

我如何展示它们？

如果您无权访问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;
}

Demo

当您对非活动标签页不需要border时，请使用border但使用透明color来平衡偏移量，例如border-top: 6px solid transparent; /* For inactive tabs */

我将如何实现这一目标？

我会在:before定位content

中使用position: absolute;伪relative设置li

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

Demo 2

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

Demo 3 （删除多余的无用属性）

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

1 个答案: