float:left的对象(导航)如何居中示例探讨
float:left的对象(导航)如何居中示例探讨
发布时间:2016-12-27 来源:查字典编辑
摘要:我们在做导航(nav)时,通常会用到float:left;但是这样做的话,让导航文本水平居中确实个麻烦事;分析如下:[float:left]...

我们在做导航(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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类