Question

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

我的理解如下：

或者，我使用CSS属性'display：inline-block;' - 但鉴于其相对较差的跨浏览器支持，我宁愿不这样做。
或者，我浮动列表并在ul级别定义'inline'特征 - 但是，这是我的麻烦开始的地方。

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

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文档中颠倒顺序并从最后一个开始 - 但我真的想弄清楚这样做的语义正确方法是什么。我相信有比我申请的更好的方式，我真的很感激任何评论。

最终我想将所有这些图标放在一个精灵中 - 但我想我必须首先解决这个问题。

谢谢你！

最好的，亚历

Answer 1

请改为尝试：

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

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

这应该在语义上显示，你不必费心浮动。

Answer 2

如果您正在寻找的话，请不要确定：

http://jsfiddle.net/RSMFw/

Answer 3

要保持所需的显示顺序，请将float: left;应用于div#footer-right的所有子元素，即：#footer-right * { float: left;}

示例：http://jsfiddle.net/wqneM/

CSS'float'与'inline-block'在无序列表中

3 个答案: