如何添加显示：阻止导航栏而不破坏显示：内联？

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;
}