html - 图像在 JSFiddle 中对齐正确，但在浏览器中不正确

Question

过去几天我一直在忙着编写我的作品集。快完成了，突然遇到一个问题:

标题中的社交媒体图标在我的联系页面上没有正确对齐，尽管它们在其他页面上正确显示(使用完全相同的代码)。现在，当我将页面上传到 JSFiddle 时，一切正常。

它在我的浏览器中的显示方式

JSFiddle:http://fiddle.jshell.net/ydgyscoq/7/show/

如果您需要更多信息，请告诉我，但在此先感谢您!

Answer 1

这些图标正在清除中间的非 float 列表项(您的按钮)。您可以重新排序您的 HTML 来解决这个问题:

<ul>
    <li class="lileft"><a href="index.html"><img src="http://u.cubeupload.com/Levano/home.png" /></a></li>
    <li class="liright"><a href="http://www.twitter.com"><img src="http://u.cubeupload.com/Levano/twitter.png" alt="Twitter" title="Follow me on Twitter" /></a></li>
    <li class="liright"><a href="http://www.facebook.com"><img src="http://u.cubeupload.com/Levano/facebook.png" alt="Facebook" title="Like me on Facebook" /></a></li>
    <li class="limid"><a href="aboutme.html">over mij</a></li>
    <li class="limid"><a href="projects/collection.html">projecten</a></li>
    <li class="limid"><a href="contact.html">contact</a></li>
</ul>

但是，如果是我个人，我至少会有一个容器来对相关元素进行分组，这也将帮助您解决 float 问题。