HTML 将链接元素的高度设置为其背景

Question

无法设置链接元素(HOME,GAMES,ANIMALS,LOGOUT)的高度，求助。 html代码:

    echo"<div id=\"navigation_bar\">";
echo"<ul>";
echo" <li id=\"home\"><a href=\"animal_home.php\" >HOME</a></li>";
echo" <li id=\"laro\"><a href=\"animal_laro.php\">GAMES</a></li>";
echo" <li id=\"aralin\"><a href=\"animals.php\">ANIMALS</a></li>";
echo" <li id=\"logout\"><a href=\"animal_logout.php\">LOGOUT</a></li>";
echo"</ul>";
echo"</div>";

虽然这是 css:

 #navigation_bar ul {
display:block;
float:left;
width:800px;
height:50px;
background:url(images/animal_home_nav.png) no-repeat center;
list-style:none;
}



#navigation_bar ul li  {
display:block;
float:left;
height:50px;
}

  #home{
width:190px;
}


#aralin {
width:220px;
}


#laro {
width:161px;
}

  #logout{
width:200px;    
}

Answer 1

只需将此 css 添加到您的 css 文件中

#navigation_bar ul li a{
display:block;
height:100%;
width:100%
}