我们在做导航(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>
本文地址:https://www.stayed.cn/item/3524
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我