<a> 标签与 <div> 不匹配

Question

我正在制作一个螺旋形图片库，因此当您单击任何图片时，它会将您带到另一个页面。为此，我使用了这段代码：

HTML:

<div class="rotulacion-embarcaciones">
        <a href="rotulacion-embarcaciones.html">
            <img src="embarcaciones/embarcaciones1.jpg" class="rotulacion-embarcaciones">
        </a>
    </div>

CSS:

.rotulacion-embarcaciones {
border-radius: 50%;
width: 200px;
height: 200px;
position: absolute;
padding: 40px;
top: 100px;
left:35px;

}

但问题是我无法点击图片，因为 <a> 标签有一些问题，请查看 chrome 检查员检测到的图片，以便您更好地了解是什么发生：

http://i.stack.imgur.com/1FdbL.png

http://i.stack.imgur.com/8rtYY.png

http://i.stack.imgur.com/JHBcj.png

Answer 1

您在 a 中遇到的问题是其中的所有内容都是绝对定位的。带有 position:absolute 的东西在正常页面流中不会占用 space，这意味着 a 折叠到大小 0×0。

解决方案：对 a 中的图像使用另一个 class，并在不使用 position 的情况下为其设置样式。

<a> 标签与 <div> 不匹配

The <a> tag doesn't match the <div>

html

css

image

css-position