0

我有这个代码：

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

正如您在此处看到的，在图像的两侧我也可以单击..为什么？我只想点击图片。

4

5 回答 5

2

正如我在评论中指出的那样，因为您将显示设置为阻止图像，因此它占据了其父级的整个宽度。这就是块元素的作用。解决此问题的一种方法是删除您在图像标签上设置的规则，并将text-align:center规则添加到您的列表项规则中。

jsFiddle 示例

于 2013-07-10T16:49:05.787 回答
0

Your img tag is displayed block. Turn that off to prevent the entire li from being clickable.

于 2013-07-10T16:44:20.370 回答
0

发生这种情况是因为您将图像显示为块，并且宽度将默认为 li 的宽度

于 2013-07-10T16:44:34.230 回答
0

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

于 2013-07-10T16:44:59.577 回答
-2

锚标记从左到右填充列表项元素。因此，它不是您单击的列表元素，而是内容，即锚点。和平常一样...

于 2013-07-10T16:44:33.043 回答