当前位置: 代码迷 >> Web前端 >> float:left后的居中有关问题
  详细解决方案

float:left后的居中有关问题

热度:803   发布时间:2012-11-23 00:03:29.0
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

  相关解决方案