最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中inline-block代替浮动布局float:lef
时间：2013-11-18 编辑：简简单单 来源：一聚教程网
基于各位前辈的辛勤劳动，下面得出使用inline-block替换float:left;的最佳方案。
html代码
| 代码如下 | 复制代码 |
css代码(来自taobaoued)
| 代码如下 | 复制代码 |
| .list { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* IE6、7 */ } .list ul li{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top; display: inline-block; *display:inline; *zoom:1; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */ .list{ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/ } } |
|
最终效果图完美兼容
| 代码如下 | 复制代码 |
|
|
|
使用inline-block替换float:left的列表法不是一个hack,而是一个进步。
使用inline-block的时候，要注意在IE7和IE6下用背景替换文字的时候，会出现一个bug，解决方法是用font-size:0; line-height:0;替换text-indent:-9999px;，bug
-
上一个： css 导航菜单实现代码
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26