制作<a> link clickable through the whole <li></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%;
}

Answer 2

只能点击链接（文字），因为<a>具有字体的高度和宽度，不是来自{{ 1}}。如果您希望能够点击完整的<li>，您可以使用类似的内容。
在<li>附近设置<a>。

示例：

<li>

更新了演示：

<强> DEMO

Answer 3

你可以这样试试：

<li onclick="location.href='index.html'">Home</li>

Answer 4

将标签移动到li标签的外部。

• 亚历