在我的网站 ( http://milesopedia.com ) 上,我在图像上有这个叠加层,但图标没有正确对齐,如您在此处看到的:
这是一个基于 Wordpress 的博客,有一个主题,如果我查看主题的预览 (http://themes.tielabs.com/sahifa/category/world/),元素的位置是正确的:
我比较了 html 和 css,它们对我来说似乎是一样的。标记使用带有伪前元素的跨度来呈现图标。我找不到问题的根源。
代码如下:
<div class="post-thumbnail">
<a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark">
<img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">
<span class="fa overlay-icon"></span>
</a>
</div>
最佳答案
设置display: inline;
为此<span>
元素。
关于html - 跨度覆盖元素错误位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37090721/