Question

我有一个导航栏，它由水平列表元素组成，这些元素有一个外部容器和它们所属的元素类。它们都具有相同的属性，但我只想让其中一个列表元素（#nav_user）与其余元素具有不同的颜色。外部容器（nav_item_container）确定列表元素的颜色。如果我添加另一个具有新颜色的子项，例如我使用#nav_user，则颜色不会填充整个块，只有等于文本大小的水平线会发生变化。在div中添加“style = background-color”似乎可以解决这个问题。但是有更好的方法吗？我希望这是有道理的。谢谢你的帮助。

编辑：添加小提琴http://jsfiddle.net/h4ecB/

<ul>
    <li>
        <div class="nav_item_container">
            <div class="nav_element">
                <div id ="nav_user">
                    Item with different color here
                </div>
            </div>
        </div>
    </li>
</ul>

<div id ="nav_links">
    <ul>
        <li><div class ="nav_item_container"><div class ="nav_element"> Item1 </div></div></li>
        <li><div class ="nav_item_container"><div class ="nav_element"> Item2 </div></div></li>
        <li><div class ="nav_item_container"><div class ="nav_element"> Item3 </div></div></li>
    </ul>
</div>          

li .nav_item_container .nav_element #nav_user{
    background-color: #FFBF00;
}

li{
    display: inline-block;
    list-style-type: none;
}

li .nav_item_container{
    display: table;
    overflow: hidden;
    height: 45px;
    min-width: 100px;
    background-color: #FF0000;
}

li .nav_item_container .nav_element{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #FFFFFF;
}

Answer 1

如果我明白你的意思。您需要为背景提供#nav_user全高，然后为相同高度的line-height提供垂直居中的高度。

#nav_user {
   ....
   height:45px;
   line-height:45px;
}

检查JsFiddle here

CSS：覆盖父元素颜色

1 个答案: