Html <；a>；标签未覆盖<；的正确区域；部门>；

我有以下资料：

HTML:

可在此处完全查看：

我遇到的问题是，当我检查

#about

中的

元素时，我看到该区域从单词“about”的左上角开始，而不是填充整个div

如何在使整个div可单击的同时更轻松地将文本垂直居中

---

此外，我还在思考如果有人知道，

menu2

标记不能单击的原因。

您需要将锚定设置为父div的宽度和高度，我还建议调整此元素的框大小

.menu1 a {
    display: block;
    position: absolute;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    top: 0; left: 0;
}

.menu2 a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

}

---

只需增加

菜单2的高度和宽度，并在顶部添加一些填充

演示：

您需要使用
标记还是可以只使用可单击的div？理论上，我可以去掉标记，通过div的jquery处理单击。我仍然使用jquery来监视单击。“那可能会更好。”詹姆斯科登查看我的answer@JamesKorden现在看看我的答案。它现在可以工作了，假设每个人都可以使用html5。我不是这样假设的。在本例中，请尝试单击“关于”按钮的左上角。它不是一个可点击的区域。另外，如果你检查标签，它是边界div的区域。只是被填充物向下和向右推。这是因为你有a是一个绝对定位的元素，我添加了top:0；左：0；您所要做的就是在元素中添加填充以移动单词，或者使用垂直对齐/文本对齐将div居中。。。但这取决于你如何巧妙地使用CSSI忘记了我在测试某些东西时向该元素添加了绝对值。一直俯瞰着它。删除它会使操作变得简单，因此请将其标记为正确。这也有相同的问题。单击“关于”的左上角。此外，menu2现在将文本对齐到顶部，而不是居中。
.menu1
{
    position: absolute;
    background: red;
    width: 60px;
    height: 21px;
    padding: 15px 20px;
}

.menu1 a
{
    display: inline-block;
    position: absolute;
    color: white;
    text-decoration: none;
}

.menu2
{
    position: absolute;
    background: purple;
    width: 80px;
    height: 42px;
    left: 115px;
}

.menu2 a
{
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

.menu1 a {
    display: block;
    position: absolute;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
    top: 0; left: 0;
}

.menu2 a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    width: 100%; height: 100%; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

}

<a><div></div></a>