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

Question

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

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>

Answer 1

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

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

Clickable boxes in nav rather than text in the box - display-block doesn't work

html

css

nav