0

我有一个导航栏，它由水平列表元素组成，这些元素有一个外部容器和它们所属的元素类。它们都具有相同的属性，但我只想让列表元素之一（#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;
}
4

1 回答 1

2

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

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

在这里检查JsFiddle

于 2013-10-08T09:33:55.087 回答