快捷搜索:   服务器  PHP  安全  linux 安全  IIS

多个块标签float:left之后又要整体水平居中的解决办法

大家在用 <li> 标签做一个导航的时候,难免会碰到这个问题, <li> 标签 float:left; 之后,不能居中对齐

下面这三种方法可以解决这个问题。

方法一:

 为ul设置上width值,如ul {width:500px}

<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>

 

方法二:(笨牛网测试过这种方案,可行)

 为ul添加样式 如ul {display:inline-block; *display:inline; zoom:1;}

<!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>

方法三:

我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。

<div id="macji">
 

  <ul class="macji-skin">
       <li>列表一</li>
       <li>列表二</li>
       <li>列表三</li>
   </ul>
</div>

 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知)。可以设置ul的text-align:center,再设置li的display,可以实现居中,但这样不是我们的初衷,我们需要实现float:center。

这里我们得先重温一下position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或者left:-50%),那么li就像向中间浮动一样居中了。废话不多说,先试试。

#macji{
   position:relative;
   width:100%;
   height:80px;
   background-color:#eee;
   text-align:center;
   overflow:hidden;
}
#macji .macji-skin{
   float:left;
   position:relative;
   left:50%;
}
#macji .macji-skin li{
   position:relative;
   right:50%;
   float:left;
   margin:10px;
   padding:0 10px;
   border:solid 1px #000;
   line-height:60px;
}

 


顶(2)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论