Question

我有以下内容：

HTML：

    <div id="about" class="menu1"> <a href="#">About</a></div>
    <div id="aboutsub">
        <div id="team" class="menu2"> <a href="">Team</a></div>
        <div id="experience" class="menu2"> <a href="">Experience</a></div>
        <div id="difference" class="menu2"> <a href="">Difference</a></div>
    </div>

CSS：

.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;
}

完全可以在这里查看： http://jsfiddle.net/snk42/1/embedded/result/

我遇到的问题是，当我检查<a>内的#about元素时，我看到区域从“约”字样的左上角开始，而不是填充整个div。

如何在整个div可点击的同时更容易地将文本垂直居中？

另外，我正在努力解决为什么如果有人知道menu2标签不可点击的原因。

Answer 1

您需要使锚定父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;

}

http://jsfiddle.net/sjZe4/1/＆lt; - 小提琴

Answer 2

只需增加menu2的高度和宽度，并在顶部添加一些填充。

演示：http://jsfiddle.net/snk42/4/embedded/result

Answer 3

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

<a> tag not covering correct area of <div></div></a>

3 个答案: