html - 我的链接的可点击区域太大

我有一个包含在链接中的 <img> 徽标，并且该链接包含在 <div> 中。

我下面的代码导致我的链接的可点击区域水平延伸 100% 到视口(viewport)的两个边缘。

如何使链接的可点击区域与徽标的大小相同？

jsFiddle

我的 HTML:

<div id="logo-container">
    <div id="logo">
    <a href="dashboard.php"><img src="http://placehold.it/350x150" /></a>
    </div>
</div>

我的CSS:

#logo-container{
    width:100%;
    float:left;
    height:auto;
    margin:0 auto 0 auto;
    background:#ECECEA;
}

#logo{
    margin:0 auto;
    height:auto;
}

#logo img {
    display:block;
    margin:6px auto 10px auto;
}

#logo img{
    width:330px;
    height:auto;
}

最佳答案

这是因为 image 设置为 display: block; ，这样会将其扩展到完整的可用宽度，将 A 元素边界推到极致。

相反，保留徽标图像 inline 并使用 text-align:center; 作为 #logo 父级:http://jsfiddle.net/wLbo6mjr/10/

#logo{
    text-align:center;
}

#logo img {
    margin:6px 0 10px 0;
}

关于html - 我的链接的可点击区域太大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25408990/