float:left后的居中有关问题 _Web前端

float:left后的居中问题

首先是代码：

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>float:left居中的问题。</title>
        <style type="text/css">
            * { margin:0; padding:0; list-style:none;}
            body { text-align:center;}
            li { float:left; font-size:12px;}
            a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">关于</a></li>
            <li><a href="#nogo">产品</a></li>
            <li><a href="#nogo">联系我们</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

?第一种简单的方法是为ul设置上width值，如ul {width:260px}：

 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>float:left居中的问题。</title>
        <style type="text/css">
            * { margin:0; padding:0; list-style:none;}
            body { text-align:center;}
            li { float:left; font-size:12px;}
            a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}
            ul {width:260px}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">关于</a></li>
            <li><a href="#nogo">产品</a></li>
            <li><a href="#nogo">联系我们</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

?如果没有办法决定宽度，这正是我这次遇到的问题，就要采用如下方法解决：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>inline-block解决float:left对象无法居中的问题。</title>
        <style type="text/css">
            * { margin:0; padding:0; list-style:none;}
            body { text-align:center;}
            li { float:left; font-size:12px;}
            a { float:left; border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}
            ul { display:inline-block; *display:inline; zoom:1;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#nogo">首页</a></li>
            <li><a href="#nogo">关于</a></li>
            <li><a href="#nogo">产品</a></li>
            <li><a href="#nogo">联系我们</a></li>
            <li><a href="#nogo">留言</a></li>
        </ul>
    </body>
 </html>

?第二种解决方法来自于：http://www.cnblogs.com/hema/archive/2009/12/17/1626497.html