CSS“浮动”与“内联块”相比在无序列表中
我正在努力处理一个无序列表的CSS，我想使用它来提供一些在线配置文件的链接。该列表显示在每个页面的页脚中，如下所示（右下）：http://www.alexbrunner.com。
我的理解如下：
- 要么，我使用 CSS 属性“display:inline-block;” - 但鉴于其跨浏览器支持相对较差，我宁愿不这样做。
- 或者，我浮动列表并在 ul 级别定义“内联”特征 - 然而，这里是我的麻烦开始的地方。
如果我将 li 元素向左浮动，它显然位于文本的错误一侧。如果我将 li 元素向右浮动，显然每个项目都会浮动到下一个项目的右侧，这会导致我的列表以相反的顺序显示。
html 是：
<div id="footer-right">
<p>E-mail me at [email protected]<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 文档中的顺序并从最后一个开始 - 但我真的想弄清楚执行此操作在语义上正确的方法是什么。我确信有比我所应用的更好的方法，我非常感谢对此的任何评论。
最终我想将所有这些图标放入精灵中 - 但我想我必须首先在这里解决这个问题。
谢谢你！
最好的， 亚历克斯
i am struggling with the CSS of an unordered list which i want to use in order to provide links to a number of online profiles. the list is displayed in the footer of every page, like so (bottom right): http://www.alexbrunner.com.
my understanding is the following:
- either, i make use of the CSS property 'display:inline-block;' - but given its relatively poor cross-browser support i would prefer not to.
- or, i float the list and define the 'inline'-characteristic on the ul-level - here, however, is where my trouble begins.
if i float the li-elements left, it is obviously positioned on the wrong side of the text. if i float the li-elements right, obviously each item is floated to the right of the following item, which results in my list being displayed in the reverse order.
the html is:
<div id="footer-right">
<p>E-mail me at [email protected]<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>
and the css is:
#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; }
of course, i could just reverse the order in my html document and start with the last - but i really want to figure out what is the semantically correct way of doing this. i am sure there is a better way than what i have applied and i would really appreciate any comments on this.
eventually i want to put all those icons in a sprite - but i figure i have to solve this issue here first.
thank you!
best,
alex
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
试试这个：
http://jsfiddle.net/AcTu7/1/
这应该在语义上显示，你不必为浮动而烦恼。
Try this instead:
http://jsfiddle.net/AcTu7/1/
This should display semantically and you don't have to bother with floats.
通过阅读不确定这是否是您正在寻找的内容：
http://jsfiddle.net/RSMFw/
Not sure from reading if this is what you are looking for:
http://jsfiddle.net/RSMFw/
要保持所需的显示顺序，请将
float: left;应用于div#footer-right的所有子元素，即：#footer-right * { float: left;}示例：http://jsfiddle.net/wqneM/
To maintain the desired display order, apply
float: left;to ALL of the child elements of yourdiv#footer-right, i.e:#footer-right * { float: left;}Example: http://jsfiddle.net/wqneM/