html - 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%
}

Answer 2

如果你把它添加到你的 css 中，你应该能够在 a 标签上放置你想要的任何尺寸：

#navigation-bar ul li a {
    display:block;
    height:100%; /* or whatever height value you want to use */
}

您的问题是标签是内联元素，您只能在块元素上设置尺寸。因此，如果您将尺寸设置为 li（它们是块元素）并将标签设置为 display:block; 宽度：100%；和 height:100%;，它们将填满 li 的整个内部。

希望这可以帮助！