html - 导航中的可点击框而不是框中的文本 - 显示块不起作用

Question

我试图让我的导航项成为可点击的块，而不仅仅是块内的文本，但我无法让它工作。我在display-block我的<a>标签上添加了一个，但它没有效果。我错过了什么？

nav li {
    float: left;
    margin: 0 1em 0 1em;
    list-style-type: none;
    background-color: lightblue;
    border-radius: 10%;
    padding: .7em;
}

nav a { 
    color: #6a6a6a;
    display: block;
    text-decoration: none;
}

nav ul {
    padding: 0;
    margin: 0;
}

nav {
    display: inline-block;
}

<nav>
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Calendar</a></li>
    </ul>   
</nav>

标签： htmlcssnav

Answer 1

您需要将填充应用于<a>标签本身，而不是<li>s