float:left的对象(导航)如何居中示例探讨
2013-11-18 16:29
429 查看
我们在做导航(nav)时,通常会用到float:left;但是这样做的话,让导航文本水平居中确实个麻烦事;
分析如下:
[float:left]有个伟大之处,它使div(或者其他标签)的宽度自适应其内容,但它却有个弊端:无法居中。
[display:inline-block]也有同样的特性,并且可以居中,但连续几个这样的东东,之间却会出现空格。
为了解决这个问题,我们可以把二者结合起来使用:
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统:Windows]
分析如下:
[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>
相关文章推荐
- float-left的对象如何居中
- float:left的对象如何居中
- 前端面试题 - 如何居中一个float:left的元素
- 前端试题-如何居中一个float:left的元素
- 下面的示例演示如何使用传递到事件处理方法的 GridViewCommandEventArgs 对象确定引发事件的按钮的命令名。
- DCOM 示例:演示如何远程调用 COM 对象
- js中如何把字符串转化为对象、数组示例代码
- 用ul、li做横向导航(float:left 向左漂移)
- 如何创建支持FILESTREAM的数据库示例探讨
- 如何:通过导航控件创建一个新的对象
- CSS如何居中一个float浮动元素?
- Python 不同对象比较大小示例探讨
- CSS display:inline和float:left两者区别探讨
- 如何清除浮动塌陷? float:left 塌陷
- HreoWinGauge2.0组件集应用示例----在应用程序中如何快速引用对象和属性
- float:left后整体居中
- 让横向排列的几个浮动(float:left)的子div居中显示
- 如何用float配合position:relative实现居中
- Redis如何存储对象与集合示例详解
- css中float:left之后父对象高度不被撑开的解决办法