Question

请找到jsfiddle demo here。

我想把绿色带底部的导航列表。

谁能告诉我哪种风格会对我有帮助？

只需添加以下代码：

<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;
}

Answer 1

这是一种方式：

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

对容器div使用position: relative并为导航栏设置position:absolute;bottom:0;。

Answer 2

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

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

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

BTW - 如果您正在制作菜单，最好在LI中添加一个链接并将除display:inline-block之外的所有内容移动到A-tag的样式并在A-上使用display:block标记本身。

Answer 3

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

Answer 4

如果您具有块导航的确切高度且不会更改，则可以执行以下操作：

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

如果Xpx是值，则需要。

Div Block底部的水平列表

4 个答案: