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

【问题标题】：The clickable area for my link is too large我的链接的可点击区域太大
【发布时间】：2019-11-11 04:07:51
【问题描述】：

我有一个 <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;
}

【问题讨论】：

这里有更多关于在 HTML+CSS 中显示您的徽标的建议：stackoverflow.com/questions/10125335/…

标签： html css

【解决方案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;
}

【讨论】：

由于父级缺少定义的宽度，它不会扩展到原始容器的整个宽度吗？
@Frisbetarian 父 DIV #logo 是一个 DIV 元素，因此是一个 BLOCK 级元素。 IMG 是一个内联元素，如果你将它设置为 display: block 将表现得就像它是一个（可以这么说）一个 DIV 元素。现在是 block 它将父 A 元素推到极限可用宽度。
@misterManSam AFAIK img 标签默认是 inline 级元素。
它只覆盖整个空间，因为它的父div也是一个没有定义宽度的块元素。这意味着它实际上是覆盖整个宽度的父级，随后图像也通过成为其子级和块元素来实现。我不会为带有图片的锚标签设置宽度。最好将尺寸设置为父 div。
@Frisbetarian 仔细看看，IMG 父级是一个A（内联）元素。如果您将图像设置为display:block，看看Anchor 会发生什么：jsbin.com/mevud/1/edit

【解决方案2】：

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

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

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

【讨论】：