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（它們是塊元素）並設置標籤以顯示：block;寬度：100％;和身高：100％，他們將填補李的整個內部。

希望這會有所幫助！