自适应宽度位于页面中心的水平菜单，一直是很多朋友所关心的问题，cssplay上的一篇文章《Centering float:left; menus》 较好地解决了这个问题。
和早些时候发表的滑动门的菜单一样，这个菜单也要求用二种不同的方法, 一个为Firefox, Opera, Safari......，而另一个是为IE准备的（包括IE7）.
非Ie 浏览器使用display:table 和table-cell，IE使用isplay:inline-block and display:inline．
使用display:nline-block; 但是另一方面又定义display:inline; 因为 IE 只能识别inline-block样式在inline元素上面。你可试下，去掉display:inline 以后，在IE 中的效果．
引用:
<!--[if IE]>
<style type="text/css">
#nav ul {display:inline-block;}
#nav ul {display:inline;}
#nav ul li {display:inline-block;}
#nav ul li {display:inline;}
#nav ul a {display:inline-block;}
#nav {text-align:center;}
</style>
<![endif]-->
将IE的样式用条件注释写入所有IE 版本， 也许IE8 能支持display:table，因为w3.org 至今不认可display:inline-block，这样写的话，可以作为合法的样式。
菜单使用二张非常小的2 x 2 gif格式的图片作为左下和右下角的背景图。
演示：
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自适应宽度位于页面中心的水平菜单</title>
<style type="text/css">
<!--
.images {background:#c00; width:20px; height:20px; padding:1px;}
#nav ul {margin:0 auto 100px auto; padding:0; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;}
#nav li {display:table-cell; float:left; margin:0; padding:0;}
#nav a {float:left; color:#fff; background: #040 url(http://www.forest53.com/tutorials/demo/img/left2.gif) no-repeat left bottom; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;}
#nav a strong {float:left; display:block; background:transparent url(http://www.forest53.com/tutorials/demo/img/right2.gif) no-repeat right bottom; padding:5px 16px 5px 12px;}
#nav a:hover {background-color:#080; cursor:pointer;}
#nav #current a {background-color:#080;}
#nav {padding:1px 0 0 0; background:#fff; border-top:8px solid #040;}
-->
</style>
<!--[if IE]>
<style type="text/css">
#nav ul {display:inline-block;}
#nav ul {display:inline;}
#nav ul li {display:inline-block;}
#nav ul li {display:inline;}
#nav ul a {display:inline-block;}
#nav {text-align:center;}
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<ul>
<li><a href="#"><strong>HOME</strong></a></li>
<li><a href="#"><strong>PRIVACY POLICY</strong></a></li>
<li id="current"><a href="#"><strong>CONTACT US</strong></a></li>
<li><a href="#"><strong>PRODUCTS</strong></a></li>
<li><a href="#"><strong>SITE MAP</strong></a></li>
</ul>
</div>
</body>
</html>
