多个块标签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;
}
- 最新评论