0

ここでjsfiddleデモを見つけてください。

緑色の帯の下部にあるナビゲーションリストを取得したいと思います。

誰かが私に役立つスタイルを教えてもらえますか？

以下にコードを追加するだけです。

<div id="navigation">
            <div id="navBar"> 
                <ul>
                    <li>Home</li>
                    <li>Application Tracker</li>
                    <li>Insurance Policy downloads</li>
                    <li>Parner Login</li>
                    <li>SiteMap</li>
                </ul>    
            </div>
</div>​

そして、以下のようなスタイル：

#navigation{
    height:290px;    
    background-color:olive;
    display:block;
    position:static;
}
#navBar {   
    height: 33px;
    width: 100%;
}
#navigation ul {
    background: -moz-linear-gradient(center bottom , #FCFCFC 25%, rgba(200, 200, 200, 0.8) 50%) repeat scroll 0 0 transparent;
    height: 32px;
    margin: 0;
    opacity: 0.6;
    padding: 0;
}
#navigation ul li {
    color: #302E2E;
    display: inline;
    font-size: 16px;
    margin: 10px;
    padding: 0;
}​
4

4 に答える 4

2

これが1つの方法です：

http://jsfiddle.net/kKp6Z/2/

position: relativeコンテナdivに使用し、 navBarposition:absolute;bottom:0;に設定します。

于 2012-05-29T13:18:31.987 に答える
1

マージンを使用するには、ブロックアイテムが必要です。

#navigation ul li {
    color: #302E2E;
    display: inline-block; <------ here
    font-size: 16px;
    margin: 10px;
    padding: 0;
}

また、テキストを垂直方向に中央揃えにするために、マージントップを他の辺とは異なる値になるように調整することをお勧めします。

ところで-メニューを作成している場合は、LI内にリンクを配置display:inline-blockし、Aタグのスタイルとdisplay:blockAタグ自体で使用する以外のすべてを移動することをお勧めします。

于 2012-05-29T13:19:52.820 に答える
0

私の解決策：http：//jsfiddle.net/kKp6Z/1/

于 2012-05-29T13:24:26.450 に答える
0

ブロックナビゲーションの正確な高さがあり、それが変更されない場合は、次のように実行できます。

#navBar {   
    height: 33px;
    width: 100%;
    position: relative;
    top: Xpx;
}

Xpxが値である場合、必要です。

于 2012-05-29T13:35:53.497 に答える