另一个问题是“如何居中菜单？”

问题描述

| 我有一个相当标准的CSS驱动下拉菜单（如果需要，列表和列表项的CSS在下面）。我要做的就是将它放在浏览器的中央（必须支持MS IE 7）...但是，这似乎使我不屑一顾:-( 有人可以帮我吗？也许是一个简单的例子？但是实际上，我认为我可能只需要一个CSS类定义来封装一个DIV ...

/*Color navigation bar normal mode*/  
.menu a,.menu a:visited {font-family:Arial,Helvetica,sans-serif;font-style:normal;font- weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}  
.menu ul {list-style-type:none;padding:0; margin:0;}  
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }  
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }    
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}  
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}     
/*Color main cells hovering mode*/   
.menu ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}  
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color subcells normal mode*/
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/  
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}  
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} 
/*Color main cells hovering mode*/
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }  
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF;  color:#000000;}   
/*Color subcells normal mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}   
/*Color subcells hovering mode*/
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;} /*Color subcells hovering mode*/

    

解决方法

        您可以使用发送的链接g.b来完成此操作，但也可以使用

display:inline-block;

进行操作，这将减少代码量。 看到这个jsfiddle：http://jsfiddle.net/4Q5N2/

<div>
    <ul>
        <li>center</li>
        <li>menu</li>
    </ul>
</div>

--

div { background:orange; }
ul {
    list-style:none;
    text-align:center;
}
ul li {
    display:inline-block;
    zoom:1;
    *display:inline;
    margin:5px;
    background:purple;
}