0

私は、外側のコンテナとそれらが属する要素クラスを持つ水平リスト要素で構成されるナビゲーション バーを持っています。それらはすべて同じプロパティを持っていますが、リスト要素の 1 つ (#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同じ量の高さを指定して垂直方向の中央に配置する必要があります。

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

ここでJsFiddleを確認してください

于 2013-10-08T09:33:55.087 に答える