Html 图像在JSFIDLE中对齐正确，但在浏览器中对齐不正确

在过去的几天里，我一直在忙着编写我的投资组合。现在我快完成了，我突然面临一个问题：

标题中的社交媒体图标在“我的联系人”页面上没有正确对齐，尽管它们在其他页面上显示正确（代码完全相同）。现在，当我将页面上传到JSFIDLE时，一切都正常工作

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

JSFiddle：

---

如果您需要更多信息，请告诉我，但请提前感谢

JSFIDLE运行良好的一个主要原因是使用了

reset.css

。使用以下选项之一：

另一件事是使用标准字体。JSFiddle坚持这个家族：

“Helvetica”、“Arial”、“FreeSans”、“Verdana”、“Tahoma”、“Lucida Sans”、“Lucida Sans Unicode”、“Luxi Sans”、Sans serif

---

您可以尝试以上两个建议，其中一个可能适合您！检查所有文件的引用，并在控制台中查找任何不存在文件的引用的“<代码> 404”/代码>错误。

< P>这些图标正在清除中间的非浮动列表项（按钮）。您可以重新排序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>

---

但是，如果是我个人，我至少会有一个容器来对相关项目进行分组，这也将有助于您解决浮动问题。

这很有效，非常感谢！你对为标题内容创建一个容器有什么建议吗？没有，但是如果你环顾一下网页，你会很快发现一些想法。以堆栈溢出的标题/导航为例。