这是一个未知总宽度的列表菜单水平居中的例子,如果列表总宽度是已知的,那么居中是很容易的,只要设定margin:0 auto; ,而IE在Quirks Mode下,在外面容器中设text-align:center;就可以了。如果宽度是未知的,问题就俏有复杂了。
解决方法:
经作者研究,一种非标准的方法,可以在IE5.5, IE6, Firefox, Mozilla, NN, Opera and Safari,上实现未知总宽度的列表菜单水平居中。
For Internet Explorer
在菜单外面使用一个<del>标签,风格设为:display:inline-block;,然后将 text-align:center;设在再外面的DIV上,而用text-decoration:none;去除<del>的删除线。
For other browsers
在列表菜单里不能使用:loat:left 或者 display:inline,而要使用:display:table / table-cell。
不支持Mac IE5.
CSS
#menu1
{
width:408px;
padding:0;
margin:0 auto;
list-style-type:none;
}
#menu1 li
{
float:left;
width:100px;
border:1px solid #fff;
}
#menu1 a
{
display:block;
width:100px;
color:#000;
background:#d4d4d4;
text-align:center;
padding:4px 0;
text-decoration:none;
float:left;
}
#menu1 a:hover
{
color:#fff;
background:#08c;
}
#menu2
{
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#menu2 li
{
display:table-cell;
}
* html #menu2 li
{
float:left;
}
#menu2 a
{
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
* html #menu2 a
{
float:left;
}
#menu2 a:hover
{
color:#000;
background:#d4d4d4;
}
.container
{
clear:both;
text-decoration:none;
}
* html .container
{
display:inline-block;
}
xhtml
<ul id="menu1">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two</a></li>
<li><a href="#nogo">Tab Three</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
作者发表这篇文章时在去年,我想大概是这个原因,所以没有提到用IE7测试,我用IE7RC1测试,完全可用。
因为DEL在这菜单中仅用于IE,所以把代码改了下:
<!--[if IE]>
<del class="container">
<![endif]-->
<ul id="menu2">
<li><a href="#nogo">Tab One</a>
</li><li><a href="#nogo">Tab Two: Longer</a>
</li><li><a href="#nogo">Tab Three: Longest</a>
</li><li><a href="#nogo">Tab Four</a>
</li>
</ul>
<!--[if IE]>
</del>
<![endif]-->
这样标准浏览器可不加载DEL标签。
实例运行代码框如下:
提示:您可以先修改部分代码再运行

