Css 如何将HTML5样板ir类与内联元素一起使用？

我正在使用HTML5样板css，我想将

ir

类应用于我的页脚菜单。 菜单位于列表中，我使用内联块水平显示此列表

这是代码的一部分。您可以看到图像替换工作正常，但后面的文本菜单元素（没有图像）被转换到底部。这是因为

.ir:before

css规则模拟了占用一些空间的块元素

有没有一种方法可以使用HTML5样板技术而不产生这种副作用？ 如果没有，我将回到

文本缩进：-999px

技术

---

附加问题：与文本缩进相比，HTML5样板技术有什么好处？

文本缩进：-9999px方法有一些缺点。主要措施包括：

• 在IE6和IE7中对内联块元素不起作用
• 第一代iPad已经证明使用这种技术存在性能问题，页面呈现速度会慢很多
• 即使我们看不到，任何设备中的任何浏览器都必须绘制一个巨大的div（超过9999px），溢出屏幕。这对性能来说是不好的，因为它增加了页面加载时间，并且需要更多的内存资源

HTML5样板文件中的

.ir

技术已被证明具有更高的性能和可靠性。你做得对

话虽如此，我不能100%确定您在代码中想要实现什么。在这篇文章中，我对html进行了一些重构

正如你们所看到的，我用红色边框来理解元素的确切位置以及它们占用了多少空间。现在，每个图像/文本都有自己的

，这是语义逻辑（一个链接/一个列表项），如下所示：

 <ul>
     <li>facebook<li>
     <li>twitter</li>
     <li>example page</li>
 <ul>

facebook

推特
示例页

---

我还删除了导航中的

float:left

，因为您需要浮动其中的元素，而不是容器本身。希望这能让你清醒一点，帮助你到达你想要的地方。如果需要改进，或者我误解了您的目标，我准备编辑此答案。

感谢大雄的回答。我只关心两个问题：我需要文本菜单元素的双重列表来进行我没有提到的进一步样式设计，以使其更简单。我还需要让所有元素垂直居中。总而言之，我认为我的问题是带有

ir

类的元素应该被包装到它们自己的

中，以实现干净的布局。