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

Question

我有一个<img>包含在链接中的徽标,链接包含在一个链接中<div>.

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

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

• 的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;
}

Answer 1

这是因为您将图像设置为将display: block;其扩展为完整的可用宽度 - >将A元素边界推向极致.

相反,只需保留您的徽标图像inline并text-align:center;用于#logo父母:http://jsfiddle.net/wLbo6mjr/10/

#logo{
    text-align:center;
}

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

你也有很多无用的CSS在你的代码,所以我已经删除了不必要的东西出来,例如像没有必要设置一个DIV元素是display: block;和expecially比A(除非出于某种神秘的原因)...看演示链接