html - 使整个 <li> 中的 <a> 链接可点击

Question

请看这个:

这是我的 html:

    <nav id="mainNav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="projects.html">Our Projects</a></li>
            <li><a href="team.html">Our Team</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

还有我的CSS:

#mainNav ul li {
    padding-left: 10px;
}

#mainNav ul li:hover {
    background-color: rgba(0,0,0,.2);
    color: #fff;
    cursor: pointer;
}

仅当我将光标放在文本链接上方并单击时，链接才会被激活。我希望能够单击较暗的“li”背景中的任意位置并激活相应的链接。这怎么可能？

Answer 1

你可以试试这个 ( Example )

#mainNav ul li a {
    display:inline-block;
    width:100%;
}