水平菜单，不是整个框可点击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; 
}