Question

我想创建一个类似于找到here的导航栏。

我试过但我不能：D

这就是我的所作所为：

HTML:
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

CSS
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li
{
    float:left;
}
a:link,a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

或者你可以尝试我创造的小提琴 http://jsfiddle.net/uYd9u/

Answer 1

我相信这就是你要做的事。

http://jsfiddle.net/cornelas/uYd9u/11/

为了达到你想要创造的目标。

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
border-bottom: 4px solid #98bf21;
    text-align: right; //ADD
}
li
{
display: inline-block; //REMOVE FLOAT:right;
    vertical-align: bottom; //ADD to align to bottom
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
li.active,li.active a:link{//ADD so you can have one box have a background.
    background-color:#98bf21; 
    color:#FFFFFF;
}
a:hover,a:active
{
background-color:#7A991A;
}

怎么做这个导航栏？

1 个答案: