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;，将其展开为完整的可用宽度 - ＆gt;将你的A元素边界推向极致。

只需保留您的徽标图片inline并使用text-align:center; #logo家长：http://jsfiddle.net/wLbo6mjr/10/

#logo{
    text-align:center;
}

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

你的代码中还有很多无用的CSS，所以我已经删除了不需要的东西，例如，没有必要将DIV元素设置为width: 100% ;特别是float:left;（除非出于某些神秘的原因）...参见演示链接

Answer 2

在徽标上设置宽度可以修复它

#logo{
    width: 330px;
    height: auto;
    margin: 0 auto;
}

http://jsfiddle.net/wLbo6mjr/8/

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

2 个答案: