水平菜單，不是整個框可點擊CSS

Question

我已經嘗試了過去3個小時試圖讓這個工作正常，沒有運氣，我很沮喪。

我有一個包含鏈接的水平菜單，但是我無法獲得可點擊的整個按鈕。然後，我將菜單居中置於困境。

頁看起來是這樣的（它爲中心的網站上，集裝箱寬900px）

http://i.stack.imgur.com/cFKpf.png

HTML：

<div id="container"> 
     <div id="title"> 
      <h1>Welcome to my website</h1> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li><a href="">Home</a></li> 
       <li><a href="">About</a></li> 
       <li><a href="">Contacts</a></li> 
       <li><a href="">FAQ</a></li> 
      </ul> 
     </div> 
     <div id="content"></div> 
</div> 

CSS：

#container{ 
    background-color: whitesmoke; 
    width: 900px; 
    margin: 0px auto; 
    padding-bottom: 20px; 

} 

#menu, #menu ul { 
    width: 100%; 
    height: 35px; 
    background-color: #333; 
    color: whitesmoke; 
    margin: 0px auto; 
    padding: 0px; 
    float: left; 
    display: table; 
    text-align: center; 
    font-weight: bold; 
} 

#menu li{ 
    display: table-cell; 
    padding: 0px 50px; 
    vertical-align: middle; 
    border: solid 1.5px olive; 
    } 

#menu a, #menu a:visited { 
    color: whitesmoke; 
    text-decoration: none; 
    } 



#menu li:hover { 
    background-color: olive; 
    color: white; 
} 

任何關於如何幫助在保持頁面外觀的同時讓整個按鈕可點擊？

感謝

Answer 1

你不應該給li填充。您應該將a設置爲display: block;，併爲它們填充填充。因爲li和a之間不會有任何填充，因此a將填充整個框。

Answer 2

剛剛成立display: block在錨：

#menu a { 
    display: block; 
}