html-lists - 无序列表中的 CSS 'float' 与 'inline-block'

Question

我正在努力处理一个无序列表的 CSS，我想使用它来提供指向许多在线配置文件的链接。该列表显示在每个页面的页脚中，如下所示(右下角):http://www.alexbrunner.com .

我的理解是:

• 或者，我使用 CSS 属性“display:inline-block;” - 但鉴于其相对较差的跨浏览器支持，我宁愿不这样做。
• 或者，我 float 列表并在 ul 级别定义“内联”特性 - 然而，这就是我的麻烦开始的地方。

如果我将 li 元素向左浮动，它显然位于文本的错误一侧。如果我将 li 元素向右浮动，显然每个元素都 float 到下一个元素的右侧，这导致我的列表以相反的顺序显示。

html 是:

<div id="footer-right">
<p>E-mail me at mail@alexbrunner.com<br />or visit my profiles at <ul id="profiles">
    <li><a href="http://www.facebook.com/alexbrunner" target="_blank"><img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /></a></li>
    <li><a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank"><img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /></a></li>
    <li><a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank"><img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /></a></li>
    <li><a href="http://at.linkedin.com/in/abrunner/en" target="_blank"><img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /></a></li>
</ul></p>
</div>

CSS 是:

#footer-right { float:right; width:17em; border:0; border-top:1px dotted #333; text-align:right; margin:0; padding:1.25em 0; }
.profile { width:1em; height:1em; margin-left:0.3em; }
#footer-right p { display:inline; font-size:.75em; color:#666; }
#footer-right ul { display:inline; margin:0; padding:0; }
#profiles li { float:right; list-style:none; }

当然，我可以在我的 html 文档中颠倒顺序并从最后一个开始 - 但我真的想弄清楚执行此操作的语义正确方法是什么。我确信有比我应用的方法更好的方法，我非常感谢对此提出任何意见。

最终我想把所有这些图标放在一个 sprite 中 - 但我想我必须先在这里解决这个问题。

谢谢!

最好的， 亚历克斯

Answer 1

试试这个:

#profiles li { display: inline; list-style:none; }

http://jsfiddle.net/AcTu7/1/

这应该在语义上显示，您不必为 float 而烦恼。