對于不知道具體寬度的水平菜單，要實現居中，多數人會使用定位。這里我介紹另一種方法。真佩服想出這個方法的仁兄！沒有人會想到用一個<del>標簽來包含<ul>吧！不可思議吧！但<del>的確起作用了。
'text-decoration:none;'去除<del>劃線，再設置<del>的display屬性為
’display:inline-block;‘，最后是最外層的DIV文字居中
'text-align:center;'。其實這里的<del>主要是針對IE這個家伙的。FireFox和Opera就簡單了，不使用float，<ul>和<li>分別設為
'table'和
'table-cell'，<ul>使用
'margin:0 auto;'就可以了。
FF3.0/Opera9.6/IE6通過，其他沒測試。
HTML代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Center float Menu</title>
6
7 </head>
8 <body>
9 <div id="outer">
10 <del id="inner">
11 <ul id="menu">
12 <li><a href="#">home</a></li>
13 <li><a href="#">blog</a></li>
14 <li><a href="#">contact us</a></li>
15 <li><a href="#">about</a></li>
16 <li><a href="#">help</a></li>
17 </ul>
18 </del>
19 </div>
20 </body>
21 </html>
CSS代碼：
1 <style type="text/css">
2 * {
3 margin:0;
4 padding:0;
5 }
6 body {
7 font:13px/150% Verdana, Arial, Helvetica, sans-serif;
8 }
9 #outer {
10 text-align:center;
11 }
12 #inner {
13 text-decoration:none;
14 +display:inline-block;
15 }
16 #menu {
17 list-style:none;
18 margin:0 auto;
19 text-align:left;
20 display:table;
21 }
22 #menu:after {
23 content:"";
24 height:0;
25 display:block;
26 visibility:hidden;
27 clear:both;
28 }
29 #menu li {
30 display:table-cell;
31 +float:left;
32 }
33 #menu li a:link, #menu li a:visited {
34 display:block;
35 text-decoration:none;
36 text-transform:uppercase;
37 color:#fff;
38 padding:4px 16px;
39 background:#CC9966;
40 border-left:1px solid #fff;
41 +float:left;
42 }
43 #menu li a:hover {
44 background:#3399FF;
45 }
46 </style>
jimmy1985