如何将浮动项目的无序列表置于页面中心
如果我有一个无序列表，例如
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Service</a></li>
<li><a href="index.html">Blog</a></li>
</ul>
使用 CSS 很好地对齐它们，例如
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
line-height: 50px;
margin-left: 5px;
margin-right: 5px;
}
ul li a {
display: block;
height: 46px;
padding-left: 5px;
padding-right: 5px;
}
如何将
首选答案将兼容 ie6+
任何帮助。
贾伊
If I have an unordered list, e.g.
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Service</a></li>
<li><a href="index.html">Blog</a></li>
</ul>
Using CSS to align them nicely, e.g.
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
line-height: 50px;
margin-left: 5px;
margin-right: 5px;
}
ul li a {
display: block;
height: 46px;
padding-left: 5px;
padding-right: 5px;
}
How can I then align the <ul> element to the centre of the page, baring in mind that there are no widths specified for any elements?
Preferred answer will be compatible in ie6+
any help appreciated.
Jai
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以将
display: inline-block与text-align: center结合使用。这是您的代码的实现： http://jsfiddle.net/kRDsf/
如果您需要 IE7支持： http://jsfiddle.net/kRDsf/1/ + 内联块在 Internet Explorer 7 中不起作用, 6
如果您需要 IE6 支持，请参阅此答案的评论。
You can use
display: inline-blockcombined withtext-align: center.Here's an implementation of that with your code: http://jsfiddle.net/kRDsf/
If you need IE7 support: http://jsfiddle.net/kRDsf/1/ + Inline block doesn't work in internet explorer 7, 6
If you need IE6 support, see the comments on this answer.