navigation - 如何添加显示：块到导航栏而不破坏显示：内联？

Question

我正在努力让我的导航栏正常工作，一切看起来但是，但我希望文本周围的整个块区域都是可点击的，而不仅仅是文本本身。

一切看起来都不错，但是当我将 display: 块添加到 '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;
}