2

我的理解使我相信将<a>带有display:block;CSS 属性的 a 放在 a<div>中应该会导致整个 div “成为”链接（即我将鼠标悬停在 div 中的任何地方，它都被认为是链接，因为链接占用了 100 % 高度和宽度）。

在下面的示例中，这种行为似乎不起作用。如果您更愿意inspect element用实时代码四处寻找，您可以查看该站点@：http ://shayla.phasesolutions.ca/ 。有关我所描述的问题，请参阅页面顶部的导航。

HTML：

    <header>
        <div class="logo"><a href="#"></a></div>
        <div class="nav-homepage"><a href="#"></a></div>
        <div class="nav-webdesign"><a href="#"></a></div>
        <div class="nav-graphicdesign"><a href="#"></a></div>
        <div class="nav-miscartwork"><a href="#"></a></div>
        <div class="nav-aboutme"><a href="#"></a></div>
        <div class="nav-contactme"><a href="#"></a></div>
    </header>

CSS：

header {
    .site-section;
    height: 125px;

    div {
        float: left;
        position: relative;
        top: 10px;

        a {
            display: block;
        }
    }

    div:first-child {
        position: relative;
        top: 0px;
    }
}
.nav-aboutme, .nav-contactme, .nav-graphicdesign, .nav-homepage, .nav-miscartwork, .nav-webdesign, .shadow, .homepage-nav-aboutme, .homepage-nav-contactme, .homepage-nav-graphicdesign, .homepage-nav-miscartwork, .homepage-nav-webdesign, .logo{
    background: url(/resource/img/sprites.png) no-repeat;
}

.nav-aboutme {
    background-position: -81px -361px ;
    width: 76px;
    height: 105px;
    margin-right: 49px;
}

.nav-contactme {
    background-position: 0 -360px ;
    width: 76px;
    height: 105px;
}

.nav-graphicdesign {
    background-position: -79px -246px ;
    width: 89px;
    height: 105px;
    margin-right: 49px;
}

.nav-homepage {
    background-position: 0 -245px ;
    width: 76px;
    height: 105px;
    margin-right: 49px;
}

.nav-miscartwork {
    background-position: -79px -132px ;
    width: 85px;
    height: 105px;
    margin-right: 49px;
}

.nav-webdesign {
    background-position: 0 -132px ;
    width: 76px;
    height: 105px;
    margin-right: 49px;
}
4

2 回答 2

5

我相信它是因为块元素内部没有内容。如果您在锚链接中添加一个字母，则锚链接将变为 div 宽度的 100%。

如果添加 width:100% 和 height:100% 它将占据整个 div。

于 2013-08-19T23:55:20.390 回答
2

0 的 100% 是 0。你需要你div有内容，然后：

a{
  display:block; height:100%; width:100%;
}
于 2013-08-19T23:57:27.313 回答