float:left的对象(导航)如何居中示例探讨

当前位置 : 首页 > 网页制作 > CSS > float:left的对象(导航)如何居中示例探讨

float:left的对象(导航)如何居中示例探讨

来源: 作者: 时间:2015-11-04 11:06
用float让导航文本水平居中确实个麻烦事,为了解决这个问题,我们可以把二者结合起来使用,大家可以参考下面的示例,或许会有所启发哦
用float让导航文本水平居中确实个麻烦事,为了解决这个问题,我们可以把二者结合起来使用,大家可以参考下面的示例,或许会有所启发哦
我们在做导航(nav)时,通常会用到float:left;但是这样做的话,让导航文本水平居中确实个麻烦事;

分析如下:

[float:left]有个伟大之处,它使div(或者其他标签)的宽度自适应其内容,但它却有个弊端:无法居中。
[display:inline-block]也有同样的特性,并且可以居中,但连续几个这样的东东,之间却会出现空格。

为了解决这个问题,我们可以把二者结合起来使用:

[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]

[操作系统:Windows]

复制代码
代码如下:

<!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=utf-8" />
<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>
Tag:
网友评论

<