Question

我正在尝试创建一个网站导航栏，当页面处于活动状态时，我希望导航栏背景与正文相同。但是，当我这样做时，背景只包围文本而不是导航栏的整个高度。

我的HTML

<div id="navbar">

<ul>
<li><a href="index.html" class="active">    Home</a> </li> 
<li><a href="purchase.html">Purchase</a> </li>
<li><a href="contact.php ">Contact</a> </li>
<li><a href="Portfolio.html">Portfolio</a> </li>
</ul>
</div>

我的CSS

 #navbar  ul{
list-style:none;
margin:0;
background-image:url('Images/black.png');

text-align:center;

height:60px;

}

#navbar ul{

list-style-type:none;
text-align:center;
color:#fff;

}
#navbar ul li{
display:inline;

}
#navbar ul li a{
color:#36b6f4;
text-decoration:none;
font-size:30px; 
margin:30px;

}


#navbar ul li a.active{
height:60px;
background-image:url('Images/background.jpg');


}

Answer 1

我为你创造了一个小提琴：

http://jsfiddle.net/RKRHE/1/

我用颜色更改了背景图像（因为我没有你的图像）。

问题是display: inline;。你可以放float: left;

您可以从小提琴中复制我的代码，并使用图像更改背景颜色。

希望这会对你有帮助！

CSS。活跃的背景

1 个答案: