如何將display：block添加到導航欄而不會中斷顯示：inline？

Question

我正在努力讓我的導航欄工作，一切看起來不過，但我希望文本週圍的整個塊區域可點擊而不僅僅是文本本身。

這一切看起來不錯，但是當我將display：block添加到'a'元素時，內聯中斷，我得到一個導航項列表。

希望有人能幫助我，這似乎很容易，但我一直在掙扎幾天。

即，這樣做打破它：

nav li a{ 
    display: block; 
    color: #000; 
    font-size: 12px; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

http://jsfiddle.net/9zvHa/

Answer 1

添加一些填充到你的錨，使他們有更廣泛和更可點擊。

例如：

nav li a{ 
    color: #000; 
    font-size: 12px; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 10px 30px; 
}