0

Please, Find the jsfiddle demo here.

I want to take the navigation list at the bottom of green colored band.

Can anyone tell me which style will help me ?

Just adding code below:

<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>​

And style as below:

#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

这是一种方法：

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

用于position: relative容器 div 并设置position:absolute;bottom:0;为navBar。

于 2012-05-29T13:18:31.987 回答
1

您需要一个块项目才能使用边距。

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

您可能希望调整 margin-top 以使其具有与其他边不同的值，以便使文本垂直居中。

顺便说一句 - 如果你正在制作一个菜单，你最好在你的 LI 中放置一个链接并移动除了display:inline-blockA-tag 的样式之外的所有内容并display:block在 A-tag 本身上使用。

于 2012-05-29T13:19:52.820 回答
0

如果你有块导航的确切高度并且它不会改变，你可以这样做：

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

其中 Xpx 是您需要的值。

于 2012-05-29T13:35:53.497 回答
0

我的解决方案：http: //jsfiddle.net/kKp6Z/1/

于 2012-05-29T13:24:26.450 回答