Question

我有这段代码：

<ul>
    <li><a href="www.google.com"><img src="foobar.jpg" /></a></li>
    <li><a href="www.google.com"><img src="foobar.jpg" /></a></li>
</ul>

li {
    width: 100px;
    height: 100px;
    background: red;
    width: 500px;
}
img {
    margin: 0 auto;
    display: block;
}

正如您所见here，在图像的两侧我也可以点击..为什么？我只想点击图片。

Answer 1

正如我在评论中指出的那样，因为您将图像设置为阻挡图像，因此它占据了其父级的全宽。这就是块元素的作用。解决方法是删除您在图片代码上设置的规则，并在列表项规则中添加text-align:center规则。

<强> jsFiddle example

Answer 2

你的img标签是显示块。将其关闭以防止整个li被点击。

Answer 3

这是因为您将图像显示为块，宽度将默认为li的宽度

Answer 4

在img上，您将display设置为block。这意味着它将占用整行，并且该行上不会出现任何其他内容。因为您没有设置宽度，这意味着img容器将占用整行。你将a包裹起来，所以整条线都是可点击的。在img上设置宽度，或取出display:block

Answer 5

锚标记从左到右填充列表项元素。所以它不是你点击的列表元素，但它是内容，锚点。正常......

围绕<a><img/></a>的li也是可点击的..为什么？

5 个答案: