html - 标签与 不匹配

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 的东西在正常的页面流中不占用空间，这意味着 a 折叠到大小 0×0。

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