一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

兼容ie6/ie7的inline-block元素的两端对齐布局

时间:2013-08-05 编辑:简简单单 来源:一聚教程网

inline-block元素的两端对齐在图文列表布局、瀑布流布局中有着广阔的应用空间。不过ie6、ie7下的兼容性一直是个硬伤。下面尝试用ie专有属性text-justify和一些css hack兼容ie6/7。

css代码

 代码如下 复制代码

ul {
    list-style: none;
    width: 100%;
}
li {
    width: 140px;
    margin-bottom: 10px;
    padding: 10px;
    text-align: center;
    background: #ECC;
}
.text-justify {
    text-align: justify;
    *text-justify:inter-ideograph; /*IE私有属性*/
}
.justify {
    vertical-align: top;
    display: inline-block;
    *display:inline;
    *zoom:1;
}
.justify-last {
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
}

html代码

 代码如下 复制代码

实例

 代码如下 复制代码





兼容ie6/ie7的inline-block元素的两端对齐布局
 



 



热门栏目